이번 편이 만지는 곳: 개발의 화면(FE). AI가 자주 빠뜨리는 로딩/에러/빈 목록 세 상태를 채운다.
이제 화면을 만든다. 디자인이 약해도 괜찮다. 목표는 화면을 빠르게 띄우는 게 아니라, AI가 만든 "그럴듯한 기본 화면"을 쓸 만한 화면으로 비판하고 고치는 일이다. 이번 편에서 처음 쓰는 Claude Code 기능은 손그림을 첨부해 지시하는 이미지 입력과, 변경분만 모아 보는 /diff, 그리고 화면을 빠르게 잡아 주는 frontend-design 플러그인이다.
AI의 습관 — 잘 되는 경우만 그린다
AI는 행복 경로(happy path), 그러니까 모든 게 정상인 화면만 빠르게 만든다. 하지만 실서비스 품질의 8할은 안 되는 경우에서 갈린다. 사용자는 인터넷이 느리고, 서버가 가끔 죽고, 가입 첫날엔 목록이 비어 있다. 그래서 꼭 챙겨야 할 세 가지 화면 상태가 있다.
- 로딩 중 — 데이터를 기다리는 동안 멈춘 화면이 아니라 진행 표시가 보이는가.
- 에러 발생 — 서버가 죽었을 때 빈 화면이 아니라 사람이 이해할 메시지가 뜨는가.
- 빈 목록 — 아직 데이터가 없을 때 무엇을 하라는 안내가 뜨는가.
화려한 기능보다 이 세 상태를 챙기는 게 좋은 UX(User Experience: 사용자 경험)의 8할이다. 그리고 디자인이 막막하면 손으로 그려서 사진을 찍어 보여 주면 된다. 말보다 그림이 빠르다. 코더가 약한 디자인 영역은 frontend-design 플러그인과 디자인 스킬로 메운다.
따라하기 1 — frontend-design으로 핵심 화면
/plugin install frontend-design@claude-plugins-official
우리 MVP 핵심 화면을 Next.js와 Tailwind CSS로, 반응형으로 만들어 줘.Tailwind CSS는 미리 준비된 작은 스타일 조각을 붙여 화면을 빠르게 꾸미는 도구이고, 반응형은 화면 크기에 맞춰 배치가 자동으로 바뀌는 것이다. 화면이 그럴듯한지, 모바일과 데스크톱에서 깨지지 않는지 본다.
따라하기 2 — 손그림 이미지로 화면 지시
종이에 화면 배치를 대충 그려 사진을 찍고 첨부한 뒤 지시한다.
(이미지 첨부) 이 손그림처럼 화면 배치를 바꿔 줘.의도한 배치가 반영됐는지 본다. 말로 설명하기 어려운 레이아웃을 그림 한 장으로 전달하는 게 이미지 입력의 힘이다.
따라하기 3 — 3대 누락 상태 채우기 (오늘의 시연)
네트워크를 느리게 하거나 목록을 비워 본다. 그러면 로딩 표시도, 에러 화면도, 빈 목록 안내도 없는 경우가 그대로 드러난다. 사용자는 그 멈춘 화면을 보고 떠난다. 화면이 상태에 따라 어떻게 갈라져야 하는지 한 장으로 보면 이렇다.
로딩 중, 에러, 빈 목록 세 가지 상태 화면을 추가해 줘.따라하기 4 — /diff로 변경 검토
/diff
방금 바뀐 화면 코드의 변경분을 보여 줘.의도한 부분만 바뀌었는지, 엉뚱한 곳을 건드리지 않았는지 본다.
띄워서 확인 — 에이전트가 한 일을 검증한다
화면이 예쁘게 떴다고 끝이 아니다. 에이전트는 모든 게 정상인 화면만 그려 놓고 "완성"이라 말한다. 그러니 잘 되는 화면 말고 안 되는 화면을 본다. 네트워크를 느리게, 서버를 죽게, 목록을 비게 만들어 세 상태가 실제로 처리되는지 직접 확인하고, /diff로 엉뚱한 곳을 건드리지 않았는지 되짚는다.
화면을 띄우고, 느린 네트워크와 에러, 빈 목록 세 상황을 각각 만들어 화면을 보여 줘.- 로딩 중 표시가 뜨는가?
- 에러 시 사용자가 이해할 메시지가 뜨는가? 빈 화면은 아닌가?
- 빈 목록일 때 안내가 뜨는가?
- 모바일과 데스크톱 모두 읽을 만한가?
한 겹 더 — 처음 보는 사람도 헤매지 않게
디자인 스킬로 색 대비와 여백, 버튼 크기를 한 번 다듬어,
처음 보는 사람도 무엇을 눌러야 할지 알게 해 줘.첫 사용자가 헤매지 않을 수준인지 본다. 여기서 UI(User Interface: 사용자 인터페이스)의 작은 차이가 이탈률을 바꾼다.
화면이 생겼으니 이제 지킬 차례다. 다음 편에서는 AI가 만든 코드의 보안 구멍을 찾아내고, 위험한 명령을 자동으로 막는 훅을 건다.