디자인 가이드
한국형 디자인 시스템을 AI 코딩에 적용하는 법
AI에게 "예쁘게 만들어줘"라고 하면 대부분 실리콘밸리풍의 보라색 그라데이션 랜딩페이지가 나옵니다. 한국 사용자에게 익숙한 화면을 만들려면, 무엇을 어떻게 지시해야 하는지 구체적으로 알려줘야 합니다.
왜 한국형 UI는 다른가
한국의 대표 서비스들은 공통적으로 정보 밀도가 높습니다. 네이버의 메인 화면처럼 한 화면에 많은 정보를 담되, 카드와 구분선으로 그룹을 나눠 시선이 길을 잃지 않게 합니다. 반면 토스처럼 금융·인증 흐름을 다루는 서비스는 정반대로 한 화면에 하나의 과업만 두고 나머지를 모두 덜어냅니다. 즉 "한국형"이라는 하나의 스타일이 있는 게 아니라, 목적에 따라 밀도를 극단적으로 조절하는 두 가지 문법이 공존합니다. AI에게 지시할 때 이 둘 중 어느 쪽인지를 먼저 정해 주는 것만으로도 결과물의 방향이 크게 달라집니다.
컬러는 "역할"로 지정하세요
색상 코드를 나열하는 것만으로는 부족합니다. #0064FF라는 값보다 "주요 행동 버튼과 링크에만 쓰는 신뢰의 파랑"이라는 역할 설명이 훨씬 강력합니다. 실제로 잘 만들어진 디자인 시스템은 색마다 쓰임새가 정해져 있습니다. 브랜드 컬러는 전환 버튼에, 회색 계열은 배경과 구분선에, 강조색은 할인·긴급 같은 특정 맥락에만 씁니다. 프롬프트에 "primary는 CTA에만, 배경은 흰색과 회색 100만 사용"처럼 제약을 걸면 AI가 색을 남용해 화면이 산만해지는 문제를 막을 수 있습니다.
한글 타이포그래피의 함정
영문 기준으로 만들어진 컴포넌트를 그대로 쓰면 한글에서 반드시 깨집니다. 가장 흔한 문제가 줄바꿈입니다. 한글은 단어 중간에서 잘려도 브라우저가 개의치 않기 때문에, CSS에 word-break: keep-all을 넣지 않으면 "회원가"에서 끊기고 "입"이 다음 줄로 넘어가는 일이 생깁니다. 자간도 마찬가지입니다. 영문용 letter-spacing 값을 한글에 그대로 적용하면 글자가 흩어져 보입니다. 큰 제목에는 음수 자간(-0.02em ~ -0.04em)을 주는 것이 한국 서비스의 관례에 가깝습니다. 폰트는 Pretendard가 사실상의 표준처럼 쓰이고 있어, 지정해 두면 대부분의 화면이 자연스러워집니다.
DESIGN.md로 기준을 고정하기
위 내용을 매번 프롬프트에 다시 적는 건 비효율적입니다. 색상 역할, 타이포 규칙, 여백 스케일, 컴포넌트 목록을 하나의 마크다운 문서로 정리해 프로젝트 루트에 DESIGN.md로 두면, Cursor·Claude Code 같은 도구가 파일을 읽고 그 기준에 맞춰 코드를 씁니다. 화면을 하나 더 만들 때마다 톤이 미묘하게 달라지는 문제가 사라집니다. 이 사이트의 "디자인 MD" 탭에서 원하는 서비스 스타일을 고르면 이 형식의 문서를 바로 복사하거나 내려받을 수 있습니다.
여백은 8의 배수로 생각한다
여백이 제각각이면 화면이 정돈되지 않은 느낌을 줍니다. 실무에서 가장 쉬운 해법은 여백을 8의 배수(8, 16, 24, 32…)로 제한하는 것입니다. 값이 정해져 있으면 어디에 얼마를 줄지 매번 고민할 일이 사라지고, 여러 사람이 만들어도 리듬이 유지됩니다. AI에게도 마찬가지입니다. "여백은 8/16/28 스케일만 사용"이라고 못 박으면 13px, 17px 같은 값이 섞여 들어오는 일이 없어집니다. 모서리 둥글기도 같은 방식으로 세 단계 정도만 정해 두면 화면 전체가 한 벌처럼 보입니다.
모바일을 먼저 그리는 이유
한국에서 대부분의 서비스는 모바일에서 먼저 소비됩니다. 그래서 데스크톱을 먼저 만들고 축소하는 방식은 거의 항상 실패합니다. 좁은 화면에서 무엇을 남길지 먼저 결정하면 정보의 우선순위가 자연스럽게 정리되고, 넓은 화면에서는 그 우선순위를 유지한 채 여백만 늘리면 됩니다. 프롬프트에도 "모바일 우선으로 만들고 데스크톱은 확장 형태로"라고 명시하는 편이 좋습니다. 특히 하단 고정 버튼처럼 모바일 특유의 패턴은 나중에 끼워 넣기 어려우므로 처음부터 구조에 반영해야 합니다.