요고다 프로젝트에서 관리자 페이지 UI를 그려야 했다. 사실 시간이 엄청 촉박했던 건 아니지만, UI를 백지 상태에서 새로 디자인하려니 막막하기도 했고 요새 핫한 Claude Design도 직접 써보고 싶어서 한번 도전해봤다.
결과적으로 AI로 프로토타입을 빠르게 생성하고, Figma 플러그인으로 가져와서 다듬는 워크플로우를 사용했는데 엄청 만족스러웠다.
1. Claude Design에서 UI 뽑아내기
프롬프트 쓸 때 가장 중요했던 건 디자인 시스템을 먼저 정의하고, 각 페이지 프롬프트에 계속 포함시키는 것이었다.
우리 사용자 앱이 마젠타 핑크(#E6007E) + 흰색 배경 + 둥근 카드 UI 스타일이라, 관리자 페이지도 이 톤을 유지해야 같은 서비스처럼 보이기 때문이다.
작성한 프롬프트 예시 (대시보드 페이지)
YOGODA 관리자 대시보드 페이지를 만들 거야.
[디자인 시스템]
- 메인 컬러: #E6007E (마젠타 핑크)
- 배경: 흰색 (#FFFFFF)
- 스타일: 카드형 UI, 둥근 모서리 (border-radius: 12px)
- 레이아웃: 데스크톱 1440px, 좌측 사이드바 네비게이션
- 전체 톤: 미니멀하고 여백이 넉넉한 스타일
[페이지 구성]
- 상단 (주요 지표 카드 3개): 오늘 추천 건수, 가입 건수, 전환율
- 중단: 퍼널 차트 (추천 시작 → 가입 완료)
- 하단: 인기 요금제 TOP 5 + 프롬프트 버전별 전환율 테이블📌 Tip: 전체 페이지를 한 번에 다 만들어달라고 하는 것보다, 페이지 단위로 프롬프트를 나눠서 작성하는 게 결과물 퀄리티가 훨씬 좋았다.
생각보다 색상도 지정한 대로 잘 반영되고, 사이드바나 카드 레이아웃 구조를 아주 깔끔하게 잡아줘서 놀랐다.
2. Figma로 가져오기 (html to design)
Claude Design 결과물은 HTML/CSS 기반이라 Figma 파일(.fig)로 바로 내보내기가 안 된다. 그래서 Claude에서 생성한 공유 URL을 피그마 플러그인에 붙여넣어 가져왔다.
사용한 플러그인: html to design
Figma 커뮤니티의 html to design (by ‹div›RIOTS) 플러그인을 써서 URL 기반으로 디자인을 피그마로 가져왔다.
피그마로 가져오는 과정
- Claude Design에서 공유 URL 생성: Claude에게 아티팩트의 공유 URL을 만들어달라고 요청한다.
- 플러그인 실행 및 URL 붙여넣기: Figma에서
html to design플러그인을 열고, Web 탭에 복사한 URL을 붙여넣은 뒤 Import 한다. - 피그마 캔버스 확인: 플러그인이 URL에 접속해 렌더링된 페이지를 긁어와서, 변환된 프레임이 피그마 캔버스에 들어온다.
⚠️ 주의: URL 유효 시간은 약 10분!
Claude에서 생성되는 공유 URL은 임시 링크로, 약 10분이 지나면 만료된다. URL을 생성한 뒤 바로 플러그인에 붙여넣어서 Import해야 한다.
3. 전체 워크플로우 요약
[1. 디자인 시스템 정의] (기존 앱 컬러, 폰트, 카드 스타일 추출)
↓
[2. 프롬프트 작성] (디자인 시스템 규칙 + 페이지별 요구사항)
↓
[3. Claude Design 실행] (프로토타입 생성 및 피드백 수정)
↓
[4. 공유 URL 생성] (Claude에게 아티팩트 URL 요청)
↓
[5. Figma 가져오기] (`html to design` 플러그인 Web 탭에 URL 붙여넣기)
↓
⚠️ URL 유효 시간 ~10분, 생성 즉시 Import할 것!
↓
[6. 피그마 리터칭] (폰트, 색상, 레이어 정리)
↓
[7. 최종 디자인 완성]4. 후기 & 느낀 점
👍 좋았던 점
- 백지 상태의 막막함 해소: 디자인을 전문적으로 배우지 않은 개발자 입장에서, 빈 화면을 채우는 스트레스가 싹 사라졌다.
- 새로운 AI 툴 경험: 말로만 듣던 Claude Design을 직접 워크플로우에 녹여보니 AI 툴 활용 범주가 훨씬 넓어진 기분이다.
- 일관된 톤앤매너: 프롬프트 상단에 디자인 시스템을 박아두니 사용자 앱이랑 톤이 착 달라붙게 나온다.
👎 아쉬운 점 / 한계
- Figma 디테일 정리 필요: 변환 후 폰트나 레이어를 다듬는 최소한의 손가락 노동은 필요하다.
- URL 유효 시간 주의: 공유 URL이 약 10분밖에 안 되니까, URL 생성 전에 Figma 플러그인을 미리 열어두고 바로 Import하는 게 좋다.
결론
디자이너가 없어서 백지부터 UI 그리기가 막막하거나, 새로운 AI 디자인 툴을 경험해보고 싶은 개발자라면 꼭 한번 써보는 걸 추천한다. 백지에서 고민하는 시간을 대폭 줄여주고 완성도도 꽤 높아서 개인적으로 너무 만족스러운 작업이었다!
