Claude Code의 새로운 UI 미리보기 기능이 정말 훌륭하네요.
New UI Preview feature on Claude Code is really great.
핵심 요약
Claude Code가 CSS 수정 전 사용자의 디자인 취향을 먼저 확인하는 사용자 중심의 작업 흐름을 보여줍니다.
- 디자인 선택지 — CSS를 바로 수정하는 대신 사용자가 원하는 디자인 방향을 먼저 제안함.
- 주관적 영역 처리 — '더 예쁘게'라는 모호한 요청을 디자인 옵션으로 구체화하여 해결함.
- 작업 흐름 개선 — 시각적 맥락을 파악하고 인간의 선택을 거쳐 코드를 수정하는 효율적인 프로세스를 제공함.
Claude Code의 작지만 흥미로운 동작을 발견했습니다.
스크린샷을 주고 내비게이션 바를 더 예쁘게 만들어달라고 요청했죠.
CSS를 바로 수정하는 대신, 먼저 어떤 방향으로 갈지 선택하라고 하더군요:
- 세련된 골드 알약 모양
- 반짝이는 접두사
- 텍스트 주변의 은은한 후광
이 부분이 정말 유용하다고 느꼈습니다.
프론트엔드 작업에서 '더 예쁘게 만들어줘'는 코딩 지시가 아니라 취향의 영역이니까요.
Claude Code는 프롬프트에서 바로 diff로 넘어가지 않고, 주관적인 단계에서 먼저 멈췄습니다.
작업 흐름은 다음과 같았습니다:
시각적 맥락 → 디자인 옵션 → 인간의 선택 → 코드 수정


