클로드 디자인 결과물 클로드 코드로 작업하기 - 간단 설명

클로드 다지인 앱 UI 만들기: https://json8.tistory.com/208

디자인 못하는 개발자가 Claude Design으로 운동 앱 UI 만들어본 솔직 후기

 

이번에는 Claude Design으로 만든 결과물을 실제 코드 작업으로 연결하는 방법을 간단하게 정리해봤습니다.

예전에는 디자인 시안 따로, 개발 작업 따로 진행하는 경우가 많았는데 최근에는 AI 디자인 결과물을 바로 코드 작업 흐름으로 넘기는 방식이 꽤 실용적으로 바뀌고 있습니다.

특히 Claude Design으로 화면 구조를 만든 뒤, Claude Code에서 이어서 작업하면 다음 흐름으로 빠르게 개발 가능합니다.

 

1. Claude Design 결과물

Claude Design 메인 화면 -> 우측 상당 Share 버튼 클릭

Share -> Handoff to Claude Code... 클릭

Copy command 버튼 클릭

2. Claude Code 작업 시작

Claude Code 실행 후 붙혀넣기

Fetch 권한 Yes 선택

Claude Design 작업 파일 200KB 다운로드 완료

압축 파일 열다가 한 번 실패하고, 방법 바꿔서 성공한 다음 설계 문서 읽기 시작하는 과정진행합니다.

이제 본격적으로 코드 만들기 시작합니다.

 

15분 5 만에 준비 완료

1482 라인 index 파일 생성

3. 1차 코드 작업 결과

AI 영어 앱 온보딩 화면 총 17개 스크린 구현

 

• 온보딩 플로우 12개 → 환영 → 이름 → 목표 → 직업 → 상황 → 레벨테스트 → 결과 → 홈
• 퀵스타트 기능 5개 → AI 채팅, 쉐도잉, 영어일기, 오늘의 표현, 토익 퀴즈

 

Cluade Design 작업된 화면이 index.htm 코드로 로컬에 생성 완료 되었습니다.

4. 토큰 사용량

5시간 한도 23%, 주간 한도 6% 사용

 

마무리

이렇게 Claude Code 가 설계 파일을 읽고 구조를 분석한 뒤, 15분 만에 1,525줄짜리 HTML 파일을 만들어냈습니다.

물론 최종 목표는 안드로이드 앱입니다.
이번 HTML 결과물은 브라우저에서 바로 실행해보며 화면 흐름과 UI를 빠르게 검증할 수 있는 프로토타입 용도로는 충분히 의미가 있습니다.

다음 편에서는 이 index.html 파일을 기반으로 Claude Code 에게 실제 안드로이드 앱 제작을 맡겨볼 예정입니다.
과연 AI가 HTML 구조를 Kotlin과 Jetpack Compose 기반의 네이티브 앱으로 얼마나 자연스럽게 변환해줄지 직접 확인해보겠습니다.