소개

스크린샷이나 간단한 디자인 요구사항, 아이디어를 얻을 만한 참고 자료가 있다면 Codex로 프로젝트의 기존 패턴을 살린 반응형 UI를 구현할 수 있습니다.

Playwright 스킬을 사용하면 Codex가 실제 브라우저에서 앱을 열고 구현한 화면을 화면 크기별 스크린샷과 비교할 수 있습니다. 비교 결과를 바탕으로 레이아웃이나 동작을 반복해서 조정해 목표 디자인에 더 가깝게 만들 수 있습니다.

참고 자료로 시작하기

원하는 UI를 가장 잘 보여 주는 참고 자료를 Codex에 제공하세요. 범위가 작은 작업이라면 스크린샷 한 장으로도 충분할 수 있습니다. 데스크톱과 모바일 레이아웃, 마우스 포인터를 올렸을 때와 항목을 선택했을 때의 모습, 데이터가 없거나 로딩 중일 때의 화면 등 작업에 필요한 상태를 함께 보여 주면 요구사항을 더 정확하게 전달할 수 있습니다.

참고 자료가 완성된 디자인 시안일 필요는 없습니다. Codex가 추측하지 않아도 될 만큼 요소 간의 시각적 위계와 간격, 의도한 디자인 방향이 분명하게 드러나면 됩니다.

원하는 결과를 구체적으로 설명하기

기대하는 상호작용 패턴과 원하는 스타일을 구체적으로 설명할수록 더 좋은 결과를 얻을 수 있습니다. 모델은 흔히 쓰이는 패턴과 스타일을 따르는 경향이 있습니다. 색다른 디자인을 원해도 참고 자료에 그 의도가 분명하게 드러나지 않으면 평범한 UI가 나올 수 있습니다. 아이디어를 보여 주는 참고 자료를 더 제공하거나 지시를 구체화하면 개성 있는 UI를 얻을 가능성이 커집니다.

디자인 시스템 준비하기

작업할 레포지토리의 컴포넌트 구조가 명확할수록 Codex가 효과적으로 작업할 수 있습니다. Codex는 기존 컴포넌트와 디자인 시스템을 처음부터 다시 만들 필요 없이 자동으로 활용할 수 있습니다.

일반적인 기술 스택을 사용하지 않는 경우처럼 추가 설명이 필요하다면, 재사용할 기본 UI 요소와 디자인 토큰의 위치를 Codex에 알려 주세요. 버튼, 입력 필드, 카드, 타이포그래피, 아이콘에는 레포지토리에서 어떤 구현이나 규칙을 표준으로 삼는지도 명시하세요.

기존 코드베이스에서 시작하면 Codex가 컴포넌트와 디자인 시스템의 사용 방식을 스스로 파악하는 경우가 많습니다. 처음부터 새로 시작한다면 그 방식을 명시하는 것이 좋습니다.

Codex에 스크린샷을 시각적 기준으로 삼고, 프로젝트에서 실제로 사용하는 유틸리티, 컴포넌트 래퍼, 색상 체계, 타이포그래피 스케일, 간격 토큰, 라우팅, 상태 관리, 데이터 조회 패턴을 활용해 디자인을 구현하도록 요청하세요.

Playwright 활용하기

Playwright는 Codex가 UI를 반복해서 다듬는 데 유용한 도구입니다. Codex는 Playwright로 실제 브라우저에서 앱을 열고, 구현한 화면을 제공된 스크린샷과 비교하면서 레이아웃이나 동작을 조정할 수 있습니다.

브라우저 창을 여러 화면 크기에 맞게 조절해 각 브레이크포인트에서 레이아웃도 확인할 수 있습니다.

Codex에서 Playwright interactive 스킬이 활성화되어 있는지 확인하세요. 자세한 내용은 스킬 문서를 참고하세요.

구현 결과 다듬기

첫 구현에서도 전체적인 모습은 스크린샷과 비슷해야 합니다. 레이아웃이나 상호작용이 복잡하거나 애니메이션이 많은 UI라면 몇 차례 조정이 필요할 수 있습니다.

Codex에 페이지 빌드 여부를 확인하는 데 그치지 말고 구현한 화면을 스크린샷과 직접 비교하도록 요청하세요. 스크린샷과 디자인 시스템이 충돌하면 레포지토리의 디자인 토큰을 우선 사용하고, 디자인의 전체적인 모습을 유지하는 데 필요한 만큼만 간격이나 크기를 조정하도록 하세요.

이미지 한 장으로 알아보기 어려운 상태가 있다면 스크린샷이나 짧은 설명을 추가하세요.

추천 후속 프롬프트