기능 소개 섹션 하나에, 네 명이 들어갑니다.

예전에 한 페이지를 만들면서 기능 카드를 혼자 다 만든 적이 있습니다. 모양은 그럴듯했는데, 디렉터가 보더니 “이거 누가 봐도 한 사람이 급하게 만든 티가 난다”고 했습니다. 무슨 말인가 했죠. 아이콘은 어디서 주워온 듯 톤이 다 다르고, 카드는 정적이라 눈이 어디로 가야 할지 모르겠고, 카피는 ‘빠른 속도’처럼 자랑만 하고 있었습니다. 그날 이후로 기능 그리드는 ‘디자인 한 명의 일’이 아니라 ‘네 사람이 같은 칸을 합작하는 일’로 봅니다.

그래서 기능 그리드 한 칸엔 누가 들어가나요?

네 명입니다. 카드의 입체감과 호버 반응은 디자인 담당, 한눈에 기능을 구분시키는 선 아이콘은 아이콘 담당, 스크롤할 때 한 박자씩 등장시켜 시선을 끌고 가는 건 모션 담당, 그리고 ‘검색에 잡히게’처럼 자랑이 아니라 결과를 말하는 한 줄은 카피 담당의 몫입니다. 아래에서 그 네 기술이 한 칸에 겹쳐진 결과를 직접 만져보세요.

3D 틸트는 왜 넣나요? 그냥 멋이 아닌가요?

틸트(마우스를 따라 카드가 살짝 기우는 효과)는 ‘이건 정적인 그림이 아니라 살아 있는 요소’라는 신호를 줍니다. 사람은 반응하는 것에 한 번 더 눈길을 줍니다. 다만 기울기는 아주 작게(몇 도)만 줍니다. 과하면 어지럽고, 내용을 읽는 걸 방해합니다. 디자인 담당의 진짜 솜씨는 ‘얼마나 화려하게’가 아니라 ‘얼마나 절제했는가’에서 나옵니다.

스태거 모션이 뭐고, 왜 한 박자씩 등장시키나요?

스태거(stagger)는 카드들이 동시에 ‘펑’ 뜨는 대신 0.08초씩 시차를 두고 차례로 등장하는 기법입니다. 동시에 다 뜨면 눈이 어디부터 봐야 할지 모릅니다. 한 박자씩 들어오면 시선이 자연스럽게 첫 카드부터 마지막 카드까지 순서대로 따라가고, 그 사이에 사용자는 카피를 읽습니다. 모션의 목적은 ‘예쁘게’가 아니라 ‘읽는 순서를 만드는 것’입니다.

아이콘 하나에도 규칙이 있나요?

있습니다. 위 카드의 아이콘은 전부 같은 굵기(stroke-width 2)의 선 아이콘으로, 톤이 한 가족처럼 맞춰져 있습니다. 여기저기서 색칠된 아이콘과 선 아이콘을 섞으면 그 순간 ‘아마추어가 만든 티’가 납니다. 그리고 아이콘은 의미를 ‘보조’할 뿐, 의미 자체는 항상 제목 텍스트(발견·인용·전환)가 책임집니다. 그래야 스크린리더 사용자도 똑같이 이해합니다.

카피는 왜 ‘빠른 속도’가 아니라 ‘검색에 잡히게’인가요?

‘빠른 속도’, ‘강력한 기능’은 회사 자랑입니다. 사용자는 자기에게 무슨 일이 생기는지를 알고 싶어합니다. 그래서 카피 담당은 기능을 결과로 바꿉니다 — ‘검색·AI에 잡히게’, ‘AI 답변에 등장’, ‘문의로 이어지게’. 짧고, 동사로 끝나고, 사용자의 이득을 말합니다. 같은 카드라도 이 한 줄이 바뀌면 읽는 사람의 마음이 달라집니다.

이걸 언제 쓰고, 언제는 쓰면 안 되나요?

히어로 바로 아래, 사용자가 ‘이 회사가 뭘 해주는데?’라고 물을 그 자리에 가장 잘 맞습니다. 가치 제안을 한 문장으로 받은 직후 그것을 3가지로 풀어주는 위치죠. 반대로, 페이지마다 이런 틸트+모션 그리드를 반복하면 어디에도 강조가 없어집니다. 한 페이지에 임팩트가 필요한 ‘한 곳’에만 씁니다. 그리고 카드가 7개, 8개로 늘어나면 그건 그리드가 아니라 목록입니다 — 그땐 모션을 빼고 단정한 목록으로 돌아가는 게 맞습니다.

과용하면 어떻게 되나요?

모든 카드가 기울고, 빛나고, 통통 튀면 사용자는 아무것도 기억하지 못합니다. 효과는 정보를 ‘읽게’ 도울 때만 가치가 있고, 정보를 ‘덮으면’ 즉시 해가 됩니다. 그래서 Findable의 합작에는 항상 선이 있습니다 — 정보는 모션 없이도 100% 읽힌다, 모션을 끈 사용자(prefers-reduced-motion)에게는 멀미를 주지 않는다, 효과는 transform·opacity만 써서 60fps로 가볍게 돈다. 멋과 배려는 같이 갑니다.

이 작품에 들어간 기술

위 한 칸짜리 카드에 들어간 네 사람의 노트를, 각자가 직접 쓴 글로 따로 읽어볼 수 있습니다.

• 디자인 — 입체 카드/틸트: 카드의 입체감과 호버 반응을 어떻게 절제하는지 → UI는 이렇게 합니다, 뒤집히는 카드의 비하인드
• 아이콘 — 톤을 맞춘 SVG: 한 가족처럼 보이는 선 아이콘 만들기 → 아이콘 담당자의 노트
• 모션 — 스태거 등장: 시선의 순서를 만드는 스크롤 모션 → 모션 담당자의 노트
• 카피 — 결과를 말하는 한 줄: 자랑 대신 이득을 쓰는 법 → 카피는 이렇게 씁니다

위 카드 한 칸을 담당별로 분해하면 이렇게 겹쳐 있습니다.

그래서 이 한 칸에 실제로 들어간 기술은 다음과 같습니다.

한 칸을 이렇게 만드는 팀이, 페이지 전체를 만듭니다

기능 카드 한 칸에 네 사람의 기준이 들어간다면, 히어로도 폼도 가격표도 같은 태도로 만들어집니다. Findable에서는 이런 합작이 기본값입니다. 당신의 사이트, 어떤 기능 그리드를 만들어 드릴까요?