11장: UI/UX 다듬기

기능이 되면 화면을 다듬을 차례

기능이 동작하기 시작하면, 이제 화면을 다듬을 차례입니다. 기능은 되는데 보기가 불편하거나, 버튼 위치가 어색하거나, 전체적으로 허전한 느낌이 들 수 있습니다. 이건 정상입니다. 기능을 먼저 만들고 디자인을 나중에 다듬는 게 올바른 순서입니다.

AI에게 디자인 개선을 시키는 가장 효과적인 방법은 구체적으로 뭐가 마음에 안 드는지 말하는 것입니다. "예쁘게 해줘"처럼 추상적으로 말하면 AI도 막막합니다.

메인 페이지가 너무 허전해.
- 상단 로고와 메뉴를 더 눈에 띄게 해줘
- 일감 목록을 카드 형태로, 한 줄에 3개씩 배치해줘
- 전체적으로 여백을 넉넉하게 늘려줘
- 카드 배경은 흰색, 그림자를 살짝 줘서 입체감 있게

마음에 드는 웹사이트를 발견했다면, 스크린샷을 찍어서 AI에게 보여주는 방법도 있습니다.

[스크린샷 첨부]
이 사이트 디자인 분위기가 마음에 들어.
특히 카드 디자인과 색상 조합을 참고해서 내 프로젝트 메인 페이지를 비슷하게 바꿔줘.

AI에게 디자인을 맡기면 기능은 되지만 어딘가 "AI가 만든 것 같은" 밋밋한 느낌이 날 수 있습니다. Anthropic이 만든 frontend-design 플러그인을 설치하면 더 세련되고 완성도 높은 디자인을 만들 수 있습니다.

Claude Code 안에서 아래 두 명령어를 순서대로 입력합니다.

/plugin marketplace add anthropics/claude-code
/plugin install frontend-design@anthropics-claude-code

설치가 끝나면 /reload-plugins를 입력해 플러그인을 활성화합니다. 이후 디자인 작업을 할 때 이렇게 사용합니다.

/frontend-design:frontend-design
이 프로젝트의 메인 페이지를 세련되게 다시 디자인해줘.

색상을 직접 지정하고 싶을 때는 색상 코드를 함께 주면 됩니다.

버튼 색상을 #2563EB (파란색)로 바꿔줘.
배경은 #F8FAFC (아주 연한 회색)으로.

색상 코드를 모르면 색상 선택 도구 (새 탭에서 열림)를 검색하면 나옵니다. "color picker"를 구글에 검색하면 바로 사용할 수 있습니다.

요즘 웹사이트는 컴퓨터뿐 아니라 스마트폰에서도 잘 보여야 합니다. 컴퓨터 화면에서는 예쁜데 스마트폰으로 열면 글자가 잘리거나, 버튼이 너무 작거나, 레이아웃이 어그러지는 경우가 흔합니다.

브라우저 개발자 도구에서 모바일 화면을 시뮬레이션할 수 있습니다.

macOS: Cmd + Option + I로 개발자 도구를 열고, 왼쪽 위의 📱 아이콘을 클릭합니다.

Windows: F12로 개발자 도구를 열고, 같은 📱 아이콘을 클릭합니다.

상단에서 기기를 선택하면 그 기기의 화면 크기로 미리 볼 수 있습니다.

가장 작은 iPhone SE 기준으로 확인하는 걸 권장합니다. 이 화면에서 잘 보이면 대부분의 기기에서 잘 보입니다.

깨지는 부분을 발견하면 스크린샷을 찍어서 AI에게 보여줍니다.

[스크린샷 첨부]
모바일(iPhone SE)에서 보면 이렇게 깨져.
- 일감 카드가 화면 밖으로 삐져나와
- 등록 버튼이 너무 작아서 누르기 어려워
고쳐줘.

스크린샷 없이 말로만 설명해도 됩니다.

모바일에서 보면 네비게이션 메뉴가 화면 밖으로 나가.
모바일에서는 메뉴를 숨기고 햄버거 아이콘으로 펼치는 방식으로 바꿔줘.

디자인만큼 중요한 게 "사용하기 편한가"입니다. 코드를 볼 줄 몰라도, 직접 사용해보면서 불편한 부분을 찾을 수 있습니다.

처음 들어왔을 때: 뭘 해야 하는지 바로 알 수 있는가? 새로운 사람이 이 페이지를 처음 봤을 때 다음 행동이 명확한가?

등록/입력 흐름: 일감이나 데이터를 등록하고 나면 어떻게 되는가? 성공 메시지가 나오는가? 목록으로 돌아가는가? 아니면 폼이 그대로 남아 있는가?

피드백: 버튼을 눌렀을 때 반응이 바로 보이는가? 저장 중이라는 표시가 있는가? 성공/실패 여부를 알 수 있는가?

이동: 다른 페이지로 가는 방법이 직관적인가? 뒤로 가거나 메인으로 돌아가기 쉬운가?

빈 상태: 데이터가 하나도 없을 때 화면이 어떻게 보이는가? 빈 목록 화면이 "뭘 해야 하는지" 안내를 해주는가?

불편한 부분을 발견하면 그대로 AI에게 전달합니다.

일감을 등록하고 나면 폼이 초기화되지 않고 그대로 남아 있어.
등록이 성공하면 폼을 비우고 목록 페이지로 이동하게 바꿔줘.

일감이 하나도 없을 때 빈 화면이 그냥 비어있어.
"아직 등록된 일감이 없습니다. 첫 일감을 등록해보세요!"라는 메시지와 등록 버튼을 보여줘.

저장 버튼을 눌렀을 때 성공했는지 실패했는지 모르겠어.
성공하면 "저장됐습니다" 토스트 메시지를 잠깐 보여줘.
실패하면 에러 메시지를 표시해줘.

핵심은 직접 사용해보는 것입니다. AI는 여러분이 불편하다고 말해야 고칩니다. "이거 불편한데?"라는 판단은 여러분만 할 수 있습니다.

완성도를 높이는 디테일이 있습니다. 데이터를 불러오는 동안, 또는 오류가 생겼을 때 화면이 어떻게 보이는가입니다.

데이터를 불러오는 동안 빈 화면이 그냥 뜨는데,
로딩 스피너나 스켈레톤 UI를 추가해줘.

일감 삭제 버튼을 눌렀을 때 확인 없이 바로 삭제돼.
"정말 삭제하시겠습니까?" 확인 팝업을 추가해줘.

이런 디테일들이 완성된 서비스처럼 보이게 만듭니다.

8장에서 만든 기능이 동작하는 프로젝트를 다듬어봅시다.

1단계: npm run dev로 개발 서버를 켜고 브라우저에서 프로젝트를 엽니다.

2단계: 화면을 하나씩 돌아다니면서 마음에 안 드는 부분을 메모합니다. 최소 3가지를 찾아보세요. 디자인이 아니어도 됩니다. 흐름이 어색한 것, 피드백이 없는 것도 포함합니다.

3단계: Claude Code에게 하나씩 개선을 요청합니다. 여러 가지를 한 번에 보내도 됩니다.

지금 프로젝트 디자인을 개선해줘.
1. 전체적으로 여백을 넉넉하게
2. 일감 목록을 카드 형태로 (배경 흰색, 그림자 살짝)
3. 등록 성공하면 목록 페이지로 자동 이동
4. 일감이 없을 때 "등록된 일감이 없습니다" 메시지 표시

4단계: 개발자 도구에서 📱 아이콘을 켜고 iPhone SE 크기로 확인합니다. 깨지는 부분을 스크린샷으로 캡처해서 AI에게 보내세요.

5단계: 개선이 완료되면 커밋합니다.

UI 개선 완료됐어. 커밋하고 GitHub에 올려줘.

디자인은 한 번에 완성되지 않습니다. 써보고, 불편한 점을 발견하고, 개선하는 과정을 반복하면 점점 좋아집니다.