이 장에서는 AI가 만든 디자인을 쉽게 개선하기 위해 검증된 서비스의 스타일을 참고해보도록 하겠습니다. 처음부터 디자인을 고민하는 대신, 이미 있는 것을 한 줄로 더 좋게 만드는 방법을 배웁니다.

1. 특정 서비스 스타일 반영하기

이번에는 디자인을 처음부터 고민하는 것이 아닌, AI가 만들어준 초안을 효과적으로 개선하는 방법을 알아보겠습니다. 우리는 디자이너가 아니니까요. 있는 것을 더 좋게 만드는 것부터 시작하겠습니다.

1.1 Claude 기본 디자인

Code 탭에 폴더를 지정하고 그냥 "타이머 만들어줘"라고 하면 어떻게 될까요?

깔끔한 디자인의 타이머 서비스 만들어줘

기능은 완벽하게 작동합니다. 사용하는 데 문제도 없습니다. 하지만 뭔가 어색하죠? Claude가 만든 기본 디자인을 자세히 보면 이런 부분들이 눈에 띕니다.

1. 불필요한 배경 그라데이션: 굳이 필요하지 않은 그라데이션이 들어가 있네요.
2. 무분별한 색상 사용: 파랑 노랑 빨강... 너무 많은 색상이 섞여 있습니다.
3. 어색한 폰트: 한글이 예쁘지 않습니다. 기본 폰트를 그대로 쓴 느낌이에요.
4. 중구난방 정렬: 여백도 제각각이고 정렬도 맞지 않습니다.

"이걸 어떻게 고치지?" 막막하실 수 있습니다.

1.2 가장 쉬운 해결책: 검증된 디자인 참고하기

'최소한 불편하지 않은 디자인'을 만드는 가장 쉬운 방법은 이미 성공한 서비스의 스타일을 참고하는 것입니다.

생각해보면 노션, 구글, 토스 같은 서비스들을 쓰면서 디자인이 불편하다고 느낀 적은 거의 없으실 거예요. 이미 수백만 명이 사용하면서 검증된 디자인이니까요. 그렇다면 이런 검증된 스타일을 참고하는 것도 좋은 방법입니다.

타이머를 만들었던 그 대화에서 이어서 아래처럼 한 줄만 요청하면 됩니다. 새 대화를 열 필요는 없습니다. 같은 폴더 안의 파일을 Claude가 직접 고쳐 저장하니, 브라우저에서 새로고침만 하면 바뀐 결과를 볼 수 있습니다.

1.2.1 Notion 스타일

디자인을 '노션' 스타일로 수정해 줘

1.2.2 Claude 스타일

디자인을 'Claude' 스타일로 수정해 줘

1.2.3 구글 스타일

디자인을 '구글' 스타일로 수정해 줘

1.2.4 토스 스타일

디자인을 '토스(Toss)' 스타일로 수정해 줘

보시는 것처럼 단 한 줄의 요청으로도 디자인이 크게 개선됩니다. 처음부터 "패딩은 16px로 하고 색상은 #3B82F6으로..."라고 일일이 지정할 필요가 없어요.

여러분이 평소에 "이 서비스 디자인 참 좋네"라고 생각했던 것들을 떠올려보시면 좋습니다. 토스의 깔끔함? 배민의 친근함? 에어비앤비의 세련됨? 어떤 것이든 괜찮습니다. 그리고 Code 탭에 "○○ 스타일로 만들어줘"라고 요청하면 됩니다.

이런 방식이 바로 '바이브 코딩'의 장점입니다. 모든 디자인 원칙을 암기할 필요가 없습니다. 좋은 디자인을 알아보는 눈과 그것을 AI에게 전달할 수 있는 간단한 표현만 있으면 충분합니다.

한 가지 팁을 더 드리자면 여러 스타일을 시도해보는 것도 좋습니다. "노션 스타일로 해봤는데 너무 심심한 것 같아. 토스 스타일로 바꿔줘"처럼 여러 번 시도하면서 여러분 서비스에 가장 어울리는 스타일을 찾아가면 됩니다. 바꿔 봤는데 이전 것이 더 나았다면 3장에서 배운 /rewind로 되돌리면 됩니다.