GPT-6 Astra로 UI 목업부터 프로토타입까지

이미지 출처 : UX Planet · Nick Babich

구현할 화면의 모습부터 이미지 목업으로 구체화합니다.

ChatGPT에서 마크다운 프롬프트로 기능 레이아웃, 시각 스타일, 플랫폼 조건을 전달합니다.
- 색상·여백·타이포그래피뿐 아니라 필요한 섹션과 컴포넌트도 함께 정의합니다.
저자의 비교에서는 초기 아이디어 탐색에 중간(Medium) 노력 수준으로도 충분한 결과를 얻었습니다.
- 높은 설정을 고집하기보다 생성 속도와 결과를 보며 탐색하는 접근입니다.

선택한 이미지의 시각적 특징을 구현에 참고할 문서로 정리합니다.

`DESIGN.md`에 색상, 타이포그래피, 간격, 컴포넌트와 사용 규칙을 담습니다.
- 이미지로만 전달하기 어려운 기준을 명시해 목업과 구현 사이의 차이를 줄입니다.
파일을 요청할 때는 따를 명세도 함께 제공합니다.
- 원문에서는 Google의 DESIGN.md 명세를 참조해 문서 형식을 맞췄습니다.

UI 이미지와 디자인 규칙을 함께 전달해 작동하는 화면으로 연결합니다.

GPT-6 Astra로 시각적 방향을 정하고, Claude Code로 코드베이스 안에서 구현합니다.
- 기존 아키텍처와 컴포넌트를 확인하며 디자인을 코드에 반영하는 역할 분담입니다.
원문에서는 목업 이미지와 `DESIGN.md`를 작업 디렉터리에 넣고 디자인 플러그인을 활용합니다.
- 시각적 결과를 확인하며 프로토타입을 구체화하는 흐름입니다.

AI로 만든 목업을 구현까지 이어갈 때, 이미지와 디자인 규칙을 함께 전달하는 방법을 보여주는 사례입니다.

읽기 좋은 상황

가져갈 포인트

이 글은 공개된 원문과 관련 자료를 바탕으로 XPLORED가 요약·해설한 콘텐츠입니다. 원문 및 원문에 포함된 자료의 권리는 각 권리자에게 있으며, 권리자가 수정 또는 삭제를 요청하는 경우 검토 후 조치하겠습니다.

매주 토요일, 한 주의 시그널을 메일로 받아보세요.

그 주에 등록된 도구와 아티클에서 뽑은 시그널을 정리해서 보내드려요.