소개

스크린샷이나 간단한 디자인 브리프, 영감을 얻을 레퍼런스가 몇 개 있다면 Codex는 프로젝트에 이미 정립된 패턴을 유지하면서 이를 반응형 UI로 구현할 수 있습니다.

Playwright 스킬을 사용하면 Codex가 실제 브라우저에서 앱을 열고, 여러 화면 크기에서 구현 결과를 스크린샷과 비교하며, 결과가 목표에 더 가까워질 때까지 레이아웃이나 동작을 반복 개선할 수 있습니다.

레퍼런스부터 시작하기

원하는 UI를 가장 명확하게 보여 주는 레퍼런스를 Codex에 제공하세요. 범위가 좁은 작업이라면 스크린샷 한 장으로도 충분할 수 있지만, 데스크톱과 모바일 레이아웃, 호버 또는 선택 상태, 중요한 빈 화면이나 로딩 화면처럼 여러 상태를 포함하면 더 명확하게 전달할 수 있습니다.

레퍼런스가 완벽하게 정리된 디자인 산출물일 필요는 없습니다. Codex가 추측하지 않아도 되도록 의도한 계층 구조, 간격, 방향성을 충분히 구체적으로 보여 주기만 하면 됩니다.

구체적으로 설명하기

원하는 인터랙션 패턴과 스타일을 구체적으로 설명할수록 결과가 좋아집니다. 모델은 흔히 쓰이는 패턴과 스타일을 기본으로 적용하는 경향이 있으므로, 레퍼런스에서 다른 방향을 원한다는 점이 명확히 드러나지 않으면 UI가 평범해 보일 수 있습니다. 영감을 줄 레퍼런스를 더 제공하거나 지침을 더 구체적으로 작성하는 등 입력을 많이 제공할수록 더 차별화된 UI를 기대할 수 있습니다.

디자인 시스템 준비하기

대상 레포지토리에 명확한 컴포넌트 레이어가 이미 구축되어 있으면 Codex가 가장 효과적으로 작동합니다. Codex는 기존 컴포넌트와 디자인 시스템을 처음부터 다시 만드는 대신 자동으로 활용할 수 있습니다.

필요하다고 판단되면(예: 표준 스택을 사용하지 않는 경우), 어떤 프리미티브를 재사용해야 하는지, 토큰이 어디에 있는지, 레포지토리에서 버튼, 입력 필드, 카드, 타이포그래피, 아이콘의 표준으로 무엇을 삼는지 Codex에 알려 주세요.

기존 코드베이스에서 시작한다면 Codex가 컴포넌트와 디자인 시스템의 사용 방법을 스스로 파악할 가능성이 높지만, 처음부터 새로 시작한다면 명확히 지정하는 것이 좋습니다.

Codex에 스크린샷은 시각적 목표로 삼되, 그 목표를 프로젝트에서 실제로 사용하는 유틸리티, 컴포넌트 래퍼, 색상 시스템, 타이포그래피 스케일, 간격 토큰, 라우팅, 상태 관리, 데이터 페칭 패턴에 맞게 구현하도록 요청하세요.

Playwright 활용하기

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

또한 브라우저 창을 여러 화면 크기로 조정해 다양한 브레이크포인트에서 레이아웃을 확인할 수 있습니다.

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

반복 개선하기

첫 번째 구현부터 전반적인 방향은 스크린샷에 가까워야 합니다. 복잡한 레이아웃이나 인터랙션 또는 애니메이션이 많은 UI라면 몇 차례 조정이 필요할 수 있습니다.

페이지의 빌드 성공 여부만 확인하지 말고 구현 결과를 스크린샷과 다시 비교하도록 Codex에 요청하세요. 충돌이 생기면 Codex는 레포지토리의 디자인 시스템 토큰을 우선하고, 디자인의 전반적인 모습을 유지하는 데 필요한 최소한의 간격 또는 크기 조정만 해야 합니다.

한 장의 이미지로 분명하지 않은 상태를 설명하는 데 도움이 된다면 스크린샷이나 짧은 메모를 추가로 제공하세요.

추천 후속 프롬프트