디자인은 말로 고르지 않는다: 비교 페이지로 결정하기
AI와 같이 화면을 만들면서 가장 자주 겪은 실패는 코드가 아니라 디자인이었습니다. "깔끔하게, 토스 느낌으로"라고 말하면 AI는 그럴듯한 결과물을 하나 만들어 옵니다. 그리고 그걸 보는 순간 "이건 아닌데"가 나옵니다. 마음대로 만들게 두면 항상 별로였습니다.
문제는 AI의 실력이 아니라 제 쪽에 있었습니다. 저도 뭘 원하는지 말로 설명하지 못했습니다. 그런데 눈앞에 두 개를 놓으면 어느 쪽이 나은지는 바로 압니다.
비교 페이지 규칙
그래서 디자인 결정은 이렇게 합니다.
- 구체적인 안을 3~4개 만듭니다. 장단점과 추천 이유를 한 줄씩 붙입니다
- 별도 HTML 페이지에 모든 안을 가로로 나란히 렌더링합니다
- 로컬 서버로 띄워 실제 브라우저에서 봅니다
- 고른 다음에야 실제 코드에 적용합니다
여기서 제일 중요한 건 바뀌는 요소를 하나로 제한하는 것입니다. 배경, 폰트, 내용이 다 다르면 무엇 때문에 마음에 드는지 알 수 없습니다. 아이콘을 비교할 땐 아이콘만, 레이아웃을 비교할 땐 레이아웃만 다르게 둡니다. 추천하는 안에는 별표를 달아서 제 의견도 분명히 남깁니다.
사례 1: 아이콘은 두 라운드로
ExamAI 토스 미니앱의 화면에 들어갈 아이콘을 고를 때였습니다. 한 번에 최종안을 고르지 않고 두 번에 나눴습니다.
- 첫 라운드는 아이콘 세트만 비교했습니다. Lucide, Phosphor, Fluent Emoji, Tabler 네 가지를 같은 화면에 넣었고 Phosphor Duotone을 골랐습니다
- 두 번째 라운드는 그 세트를 고정하고 색만 바꿨습니다. 파랑, 검정, 회색, 금색 중에서 토스 블루를 골랐습니다
한 번에 "아이콘 세트 × 색" 16개 조합을 보여줬다면 아마 결정을 못 했을 겁니다. 한 라운드에 한 가지만 묻는 게 결정을 빠르게 만들었습니다.
사례 2: 소리는 귀로 고른다
키보드 스위치를 모으는 게임 "키캡 키우기"를 만들 때는 타건음이 문제였습니다. 합성음, 흔한 클릭 샘플, 다른 녹음에서 잘라낸 소리를 차례로 넣어 봤는데 세 번 다 원하던 소리가 아니었습니다. 세 번 모두 직접 들어 보기 전에 "이 정도면 되겠지" 하고 넣은 소리였습니다.
방식을 바꿨습니다. 원본 오디오에서 타건 지점을 브라우저 Web Audio로 잘라 후보 목록을 만들고, 비교 페이지에 재생 버튼을 나란히 놓았습니다. 직접 들어 보고 하나를 골랐습니다. 그 뒤로 이 프로젝트의 사운드 작업 규칙 맨 위에는 귀로 듣기 전에는 넣지 않는다는 원칙이 있습니다.
비교 페이지가 꼭 시각 디자인에만 쓰이는 건 아니라는 걸 이때 알았습니다. 사람의 감각으로만 판단할 수 있는 건 전부 같은 방식이 통합니다.
사례 3: 포트폴리오 상세 페이지
최근에 이 사이트의 포트폴리오 상세 페이지를 바꿀 때도 같은 방식을 썼습니다. 같은 프로젝트 내용을 넣고 레이아웃만 다른 세 안을 만들었습니다.
| 안 | 특징 |
|---|---|
| A 케이스 파일 | 큰 썸네일, 4칸 사실표, 날짜가 찍힌 마일스톤 |
| B 스펙 시트 | 왼쪽에 고정된 이력서식 정보, 오른쪽에 본문 |
| C 숫자 먼저 | 제목 아래 큰 숫자 3칸 |
지금 라이브 버전도 기준선으로 같이 띄웠습니다. C는 첫인상이 가장 강했지만, 숫자가 약한 프로젝트(기획 단계, CLI)에 넣으면 칸이 비어 보일 안이었습니다. 8개 프로젝트 모두 같은 틀에 들어가는 A를 골랐습니다.
목업은 바닥이지 천장이 아니다
이 방식을 쓰면서 하나 더 정한 게 있습니다. 비교 페이지나 목업은 빠르게 방향을 맞추기 위한 디딤돌입니다. 최종 결과물은 항상 목업보다 좋아야 합니다.
목업을 그대로 옮기는 게 안전해 보이지만, 그러면 목업의 약점까지 그대로 옮겨집니다. 그래서 목업을 볼 때는 "어디를 더 낫게 할 수 있나"부터 적습니다. 정보 밀도, 시각 위계, 읽는 사람의 부담 같은 것들입니다. 비교 페이지에 올리는 안도 전부 목업보다 나아진 개선안이어야 합니다.
정리
디자인을 AI에게 맡길 때 필요한 건 더 자세한 설명이 아니었습니다. 고를 수 있는 선택지였습니다. 한 번에 한 요소만 다르게, 실제 화면에서 나란히. 이렇게 고르기 시작한 뒤로 "마음대로 만들었더니 별로"라는 말을 훨씬 덜 하게 됐습니다.
다음에 AI에게 디자인을 부탁할 일이 있다면, "하나 만들어 줘" 대신 "몇 개 만들어서 나란히 보여줘"라고 해 보시길 권합니다.