한 카드에 앞뒤 두 면을 담습니다.

예전에 한 회사 소개 페이지를 만들 때, 클라이언트가 서비스 6개를 한 줄씩 넣고 싶다고 했습니다. 그런데 각 서비스마다 “자세한 설명도 꼭 넣어달라”고 하더군요. 6개를 다 펼치면 화면이 글자로 꽉 찹니다. 그날 제가 꺼낸 게 플립 카드였습니다. 앞면엔 서비스 이름 한 줄, 뒤집으면 상세 설명. 첫 화면은 깔끔하고, 궁금한 사람만 뒤집어 봅니다.

그래서, 직접 뒤집어 보세요

설명보다 빠릅니다. 아래 카드에 마우스를 올리거나, Tab 키로 포커스를 옮겨 보세요. 마우스가 없어도 똑같이 뒤집힙니다.

참고로 위 카드가 실제로 어떤 값으로 동작하는지, 제가 쓰는 핵심 스펙만 칩으로 정리해 둡니다.

호버와 키보드 포커스를 같은 줄로 묶고, 모션을 줄이는 사용자에게는 회전을 끄는 — 위에서 말한 원칙이 이 일곱 칩에 그대로 들어 있습니다.

왜 한 면에 다 안 적고 뒤집게 했나요?

정보가 많을수록 첫인상은 무거워집니다. 사람은 화면을 ‘읽기’ 전에 ‘훑습니다’. 앞면을 요약 한 줄로 비워두면, 6개든 9개든 한눈에 스캔이 됩니다. 상세가 궁금한 사람만 한 장씩 뒤집습니다. 모두에게 모든 글자를 들이미는 대신, 필요한 사람에게 필요한 깊이를 주는 방식입니다.

그럼 아무 정보나 뒤로 숨겨도 되나요?

아닙니다. 이게 플립 카드의 가장 흔한 실수입니다. 결정에 필요한 정보는 절대 뒷면에 두면 안 됩니다. 가격, 연락처, 핵심 혜택, 마감일 같은 건 앞면에 보여야 합니다. 뒤집어야만 보이는 정보는, 뒤집지 않는 절반의 사용자에게는 존재하지 않는 것과 같으니까요. 뒷면은 ‘더 알고 싶은 사람을 위한 보충’입니다. 필수를 가리는 커튼이 아닙니다.

플립을 너무 많이 쓰면 안 되나요?

네, 남용은 독입니다. 페이지가 온통 뒤집히는 카드면 사용자는 “뭘 뒤집어야 하지?”를 고민하느라 피곤해집니다. 저는 ‘요약→상세’ 구조가 진짜 자연스러운 곳에만 씁니다. 단순한 목록이나, 한 줄로 충분한 내용에는 굳이 플립을 넣지 않습니다. 효과는 꼭 필요한 한두 군데에 쓸 때 가장 강합니다.

키보드만 쓰는 사람도 뒤집을 수 있나요?

제대로 만들면 됩니다. 흔한 플립 카드는 :hover로만 동작해서 마우스가 없으면 뒷면을 영영 못 봅니다. 저는 카드에 tabindex를 줘서 포커스를 받게 하고, :focus와 :focus-within도 :hover와 똑같이 처리합니다. 위 카드들, Tab으로 이동하면 그대로 돌아갑니다. 마우스가 없어도 같은 정보를 봅니다.

회전 애니메이션이 어지러운 사람은요?

빙글 도는 3D 회전은 누군가에게 멀미를 줍니다. 그래서 prefers-reduced-motion을 켠 사용자에게는 회전을 끄거나, 즉시 전환(페이드)으로 바꿉니다. 정보는 똑같이 다 보이되, 어지러운 모션만 뺍니다. 멋과 배려를 양자택일하지 않습니다.

모바일에서는 호버가 없잖아요?

맞습니다. 터치 화면엔 호버가 없으니 ‘올리면 뒤집힌다’가 통하지 않습니다. 그래서 모바일에선 탭하면 뒤집히고 다시 탭하면 돌아오게 처리합니다. 더 단순하게는, 모바일에서 아예 플립을 풀고 앞뒷면을 위아래로 펼쳐 보여주기도 합니다. 화면 크기마다 가장 덜 헷갈리는 쪽을 고릅니다.

플립 카드 하나도 이렇게 보는 사람이, 사이트 전체를 만듭니다

플립은 작은 장치지만, 여기에도 ‘누가 못 보게 되나’와 ‘마우스가 없는 사람은 어떡하지’가 다 들어 있습니다. 그 질문을 챙기는 사람이라면 폼도 색 대비도 같은 태도로 다룹니다. Findable에서는 이런 디테일이 기본값입니다.

항목	정보 다 펼치기	플립으로 압축
첫 화면 공간	글자로 꽉 참	앞면 요약으로 여유
스캔성(훑어보기)	어디부터 볼지 막막	한눈에 항목 비교
흥미·탐색	다 보여 더 안 봄	뒤집는 작은 재미로 탐색 유도

다른 담당자와의 연결

플립 카드는 혼자 동작하지 않습니다. 같은 사이트를 만드는 다른 담당자들의 글도 함께 보세요.

• 디자인을 어떤 원칙으로 짜는지 — UI는 이렇게 만듭니다
• 이 카드를 부드럽게 돌리는 모션의 기준 — 모션 담당자의 노트
• 키보드·색 대비·멀미까지 챙기는 법 — 접근성 담당자의 노트