소개
가상의 프리미엄 향수 브랜드 LAPIS를 기획하고, 레퍼런스 조사부터 디자인 시스템·PRD·프로토타입 제작·배포까지 한 번에 경험해 보고 싶었습니다.
브랜드 캠페인은 The Muse of Lapis, 청금석의 깊은 푸른색과 한복 저고리의 곡선을 표현하고자 했으며 색, 여백, 타이포그래피와 모션만으로 브랜드 세계관을 표현했습니다.
> 결과물: https://art-ruby.github.io/lapis-homepage/
> GitHub: https://github.com/art-ruby/lapis-homepage
진행 방법
1. AI로 브랜드 구조와 디자인 기준 만들기
Tamburins, Byredo을 레퍼런스로 삼아 디자인 시스템을 먼저 정의했습니다. 색상·타이포그래피·간격·모션·접근성 규칙을 문서화하고, 이를 design-tokens.json, tokens.css, tailwind.config.js에 동일하게 반영했습니다.
사용한 프롬프트 전문
```text
너는 Apple과 Airbnb의 Design Director이다.
다음 레퍼런스를 UX/UI 관점에서 분석하라.
- Tamburins
- Byredo
- Maison Margiela
- Le Labo
- Diptyque
- Aesop
라피스 - 한국 향수 웹사이트 디자인
분석을 바탕으로 '디자인 시스템'을 작성하라.
컬러, 타이포그래피, 스페이싱, 모션, 접근성, 그리드,
반응형 규칙, Do & Don't를 명시적으로 포함하라.
```
핵심 규칙은 골드를 화면의 5% 이내 포인트 컬러로만 사용하고, bounce·spring 계열 모션을 금지하며, 국문에는 이탤릭을 사용하지 않는 것이었습니다.
2. PRD와 원페이지 프로토타입 제작
PRD에 사용자 흐름과 정보 구조를 Hero → Brand Story → Notes → Collection → Philosophy → Contact 순서로 정리했습니다. 이후 HTML/CSS/JavaScript 기반의 반응형 원페이지를 제작했습니다. 스크롤 페이드업, 내비게이션 상태 변화, 카드 강조 모션, 아코디언과 감각 프롬프트를 구현했습니다.
아래는 입력값을 저장하지 않고 짧은 응답만 보여주는 인터랙션 코드입니다.
```javascript
promptForm.addEventListener('submit', function (event) {
event.preventDefault();
if (!promptInput.value.trim()) return;
promptReply.classList.add('show');
});
```
Notes 영역은 선택된 카드가 커지는 하이라이트 모션을 적용했습니다. 처음에는 transform: scale()을 사용했지만 글자와 이미지까지 왜곡되어, grid-template-columns를 조절하는 방식으로 수정했습니다.
검정색 배경과 꽃이 있는 웹사이트
3. Codex로 최종 파일 검증 및 GitHub 배포
Claude Design에서 내보낸 ZIP 안의 여러 파일을 Codex가 분석해, 이미지가 내장된 23.5MB 단일 배포본 LAPIS Homepage Standalone.html을 찾았 습니다. 이 파일을 웹 서버의 진입 파일인 index.html로 반영했습니다.
그다음 GitHub CLI 인증 후 art-ruby/lapis-homepage 저장소를 복제하고 다음 순서로 배포했습니다. 처음엔 깃허브에서 vercel로 업로드하려고 했는데, 업로드가 되지 않아 코덱스에서 작업했습니다.
agent/publish-one-page-prototype브랜치 생성index.html만 변경 범위로 지정해 커밋원격 브랜치 푸시 및 PR 생성
PR을
main에 병합GitHub Pages를
main브랜치 루트에서 활성화최종 빌드 상태가
built, 오류가 없음을 확인
Codex에 실제로 입력한 배포 프롬프트 전문
```text
이걸 홈피에 업로드해줘
깃허브 저장소는 art-ruby/lapis-homepage
병합해줘
```
짧은 요청이었지만 Codex가 파일 구조 확인, GitHub 인증 안내, 커밋·PR·병합, Pages 공개와 빌드 검증까지 단계별로 이어서 처리했습니다.
결과와 배운 점
6개 핵심 섹션으로 구성된 반응형 향수 브랜드 홈페이지를 완성했고, 누구나 접속할 수 있는 GitHub Pages 주소로 공개했습니다.
가장 크게 배운 점은 세 가지입니다.
먼저 규칙을 문서화하면 결과가 흔들리지 않는다. 디자인 토큰 과 금지 규칙을 먼저 정해 여러 AI 도구를 사용해도 일관성을 유지할 수 있었습니다.
모션은 감이 아니라 구조로 수정해야 한다. 움직임이 약해 보일 때 시간 값을 임의로 바꾸기보다 레이아웃 방식과 시각적 신호를 점검하는 편이 효과적이었습니다.
배포는 완료 여부까지 검증해야 한다. 파일을 올리는 데서 끝내지 않고 PR 병합, Pages 활성화, 빌드 성공과 공개 URL까지 확인해야 진짜 배포가 완료됩니다.
향수 한 병이 있는 검은색과 금색 웹사이트
시행착오도 있었습니다. 자동 분석 도구의 브라우저 다운로드가 네트워크 정책에 막혔고, 마운트된 작업 폴더에서는 Git 잠금 파일 문제가 발생했습니다. 그래서 원인을 먼저 확인한 뒤 실제 브라우징과 별도 Git 체크아웃으로 우회했습니다. 또한 Vercel 주소는 404가 반환되어 최종 공개 경로를 GitHub Pages로 전환했습니다.
앞으로는 정적 HTML을 Next.js와 TypeScript 컴포넌트로 분리하고, 한·영 전환과 실제 뉴스레터 저장 기능을 추가해 보고 싶습니다.
도움 받은 글
특정 게시글을 그대로 따라 하기보다 Byredo, Maison Margiela, Le Labo, Diptyque, Aesop의 실제 웹사이트를 1차 레퍼런스로 분석했습니다. 모션은 스터디장님이 정리한 정리한 자료를 참고했습니다.
