UI는 이렇게 디자인합니다 — 베스포크 비주얼과 디자인 시스템

왜 템플릿을 사서 쓰지 않나요?

시중에는 잘 만든 웹 테마가 많습니다. 빠르고 싸지만, 한 가지 문제가 있습니다. 같은 테마를 산 다른 회사 수백 곳과 골격이 똑같습니다. 폰트·간격·메뉴 위치·카드 모양이 정해져 있어, 색과 사진만 갈아끼우면 '어디서 본 듯한' 사이트가 됩니다. 방문자는 그 인상을 0.5초 안에 받습니다. 우리가 베스포크로 일하는 이유는 멋을 부리려는 게 아니라, 브랜드가 자기 얼굴을 갖게 하기 위해서입니다.

베스포크 디자인은 브랜드마다 타이포·컬러·여백·그리드를 처음부터 다시 정하는 것을 말합니다. 같은 업종 두 곳을 나란히 놓아도 한눈에 다른 회사로 보여야 합니다. 그 차이를 만드는 건 큰 그림이 아니라, 글자 크기 단계와 줄 간격, 색을 어디에 어떻게 쓰는지 같은 디테일입니다.

타이포·컬러·여백·그리드를 먼저 정한다는 게 무슨 뜻인가요?

UI 디자인은 사진을 예쁘게 까는 일이 아니라, 네 가지 토대를 먼저 정하는 일입니다. 타이포는 본문·소제목·제목의 글자 크기 단계(예: 16 / 22 / 36px)와 줄 간격을 정해 글이 읽히는 리듬을 만듭니다. 컬러는 색을 색이름이 아니라 역할로 정합니다 — 주조색, 강조(버튼)색, 글자색, 경계선색. 이렇게 역할로 묶어야 한 곳을 바꾸면 사이트 전체가 따라옵니다.

제가 컬러를 정할 때는 색이름이 아니라 역할로 묶습니다. 이 사이트에 실제로 쓰는 팔레트를 그대로 보여드리면 이렇습니다.

강조(--signal) 한 색만 또렷하게 쓰고 나머지는 어둠과 회색으로 받쳐, 강조가 어디로 향하는지 한눈에 보이게 합니다.

타이포도 마찬가지로 제목·소제목·본문의 크기와 굵기 단계를 먼저 고정합니다. 같은 글이라도 이 단계가 명확해야 읽는 리듬이 생깁니다.

여백은 요소 사이 간격을 일정한 단위(예: 8·16·24·40px)로 정해, 화면이 빽빽하거나 들쭉날쭉하지 않게 합니다. 여백은 비어 있는 게 아니라 '격'을 만드는 재료입니다. 그리드는 화면을 몇 칸(예: 12칸)으로 나눌지 정해, 모든 페이지의 요소가 같은 선에 정렬되게 합니다. 이 네 가지가 정해지면 그 다음 모든 화면이 같은 규칙 위에서 만들어집니다.

저는 모든 페이지를 이 12컬럼 그리드 위에 올립니다. 칸 수를 고정해 두면 페이지가 달라도 요소들이 같은 선에 정렬됩니다.

디자인 시스템(토큰·컴포넌트)은 왜 만드나요?

위에서 정한 값들을 머릿속이나 시안 그림에만 두면, 페이지가 늘어날수록 흐트러집니다. 그래서 우리는 그 값을 토큰으로 적어 둡니다. 토큰은 '강조색 = 이 값', '큰 여백 = 40px'처럼 디자인 결정을 이름 붙은 값으로 저장한 것입니다. 버튼이 마음에 안 들어 색을 바꿔야 할 때, 토큰 한 줄만 고치면 사이트 안의 모든 버튼이 함께 바뀝니다.

제가 한 프로젝트에서 고정해 두는 핵심 값들을 추리면 이런 모습입니다. 이 토큰들이 모든 화면의 기준선이 됩니다.

모서리 둥글기, 간격 단위, 가속 곡선까지 값으로 적어 두면 디자이너가 바뀌어도 같은 기준으로 일하게 됩니다.

컴포넌트는 버튼·카드·입력창·내비게이션처럼 반복되는 조각을 한 번 디자인해 재사용하는 것입니다. 각 컴포넌트는 기본·마우스 오버·눌림·비활성 같은 상태까지 미리 정합니다. 토큰과 컴포넌트를 합친 게 디자인 시스템입니다. 작은 회사라도 이게 있으면 나중에 이벤트·메뉴 페이지를 더할 때 처음부터 다시 그리지 않아 비용과 시간이 줄어듭니다. 실제 적용 사례는 제작 역량에서 볼 수 있습니다.

반응형 시안은 어떻게 만드나요?

화면 크기는 사람마다 다릅니다. 그래서 한 장만 그려선 안 됩니다. 우리는 모바일(약 390px)·태블릿(약 768px)·데스크톱(약 1440px) 세 폭을 기준으로 시안을 만듭니다. 한국은 모바일 접속이 더 많기 때문에 모바일을 먼저 설계하고, 거기서 큰 화면으로 넓히는 순서로 일합니다. 작은 화면에서 작동하는 디자인은 큰 화면에서도 대개 잘 풀리지만, 그 반대는 자주 무너집니다.

각 폭에서 글자가 너무 작아지지 않는지, 버튼이 손가락으로 누르기 어렵게 작아지지 않는지, 두 줄이어야 할 제목이 다섯 줄로 깨지지 않는지를 폭마다 확인합니다. 이렇게 검증한 세 폭 시안을 넘기기 때문에, 개발 단계에서 "모바일에선 이게 어떻게 보이죠?"라는 질문이 나오지 않습니다. 사용자가 실제로 어떻게 화면을 쓰는지는 UX는 이렇게 설계합니다에서 다룹니다.

모션 가이드는 왜 따로 만드나요?

요소가 나타나고 사라지는 움직임은 사이트의 인상을 크게 좌우합니다. 그런데 움직임이 화면마다 제각각이면 산만해 보이고, 너무 길거나 과하면 사이트가 느리고 무겁게 느껴집니다. 그래서 우리는 모션 가이드를 한 문서로 정합니다. 등장·전환에 쓰는 시간(예: 0.2~0.3초), 자연스럽게 멈추는 가속 곡선, 그리고 어디에 움직임을 쓰고 어디에는 쓰지 않을지를 적습니다.

핵심은 절제입니다. 모든 요소가 움직이면 아무것도 강조되지 않습니다. 정말 시선을 끌어야 할 한두 곳에만 움직임을 쓰는 규칙을 정해 두면, 적게 움직이는데도 더 고급스러워 보입니다. 이 문서가 있어야 프론트엔드 파트가 추측 없이 같은 규칙으로 구현합니다.

'격'을 만든다는 건 구체적으로 무엇인가요?

고급스러워 보이는 사이트와 그렇지 않은 사이트의 차이는, 큰 한 방이 아니라 작은 디테일의 합입니다. 글자 사이 간격을 한 단계 좁히고, 줄 간격을 한 단계 넓히고, 버튼 모서리 둥글기를 통일하고, 그림자 진하기를 절제하고, 색 대비를 또렷하게 맞추는 — 이런 결정 수십 개가 모여 '격'이 됩니다. 하나하나는 사용자가 의식하지 못하지만, 합쳐진 인상은 분명히 느낍니다.

우리는 이 디테일을 감으로 흘리지 않고 토큰과 가이드로 적어 둡니다. 그래야 페이지가 늘어도 같은 격이 유지되고, 디자이너가 바뀌어도 같은 기준으로 일합니다. 디자인이 색을 입히고 끝나는 게 아니라 코드로 정확히 옮겨지는 과정은 프론트엔드는 이렇게 구현합니다에서 이어집니다.

그래서 디자인 파트가 넘기는 결과물은 무엇인가요?

우리는 예쁜 그림 파일만 넘기지 않습니다. ① 세 폭(모바일·태블릿·데스크톱)으로 검증한 화면 시안, ② 색·간격·글자 크기 값을 적은 토큰 목록, ③ 버튼·카드·폼 등 컴포넌트의 상태별 디자인, ④ 반응형 동작과 모션 시간을 적은 핸드오프 문서를 한 묶음으로 넘깁니다. 이렇게 해야 다음 단계인 프론트엔드 파트가 픽셀을 눈대중으로 맞추지 않고, 정해진 값으로 빠르고 정확하게 구현합니다.

Findable은 디자인·UX·프론트엔드·GEO를 한 팀에서 진행하는 중소기업 전문 웹 에이전시입니다. 베스포크 디자인이 들어간 홈페이지 제작은 홈페이지 제작에서 확인할 수 있고, 지금 사이트의 디자인을 점검받고 싶다면 무료 진단으로 시작하시면 됩니다.