시어머니 팔순잔치를 준비하다가, 문득 그런 생각이 들었다.
어차피 카카오톡으로 공유할 거, 링크 하나로 일시·장소·지도·연락처까지 한 번에 전달할 수 있으면 훨씬 낫지 않을까. 어르신들도 많이 오시는 자리인데, 따로 주소 묻고 지도 찾고 하는 번거로운 과정을 줄여보면 어떨까.
그래서 만들었다. 기획부터 디자인, 배포까지, 하루 만에 클리어!
기술 스택과 기능부터 정의하기
콘텐츠 전시용 랜딩이고, 필요한 기능은 복사 기능, 앱링크 연결 외에 별다른 인터랙션이 없는 구조라 스택을 단순하게 가져가기로 했다.
React도, Next.js도 이 규모에서는 과하고, 순수 HTML/CSS/JS 단일 파일 + Vercel 정적 배포로 결정.
작업 후 깃허브에 private repo로 올리고 vercel에서 배포 하기로.
기획은 Claude
디자인 컨셉은 여러안을 두고 검토했다.
- 전통 단청: 금색, 격식 있는 분위기
- 모란꽃 수채화: 분홍/연보라 계열, 여성스러움
- 미니멀: 크림/베이지 배경, 세련되고 연령대 불문 무난
결론은 크림/베이지. 이유가 명확했다. 어머니가 착용하신 한복이 회청색인데, 핑크 계열 배경을 깔면 사진과 배경이 따로 노는 것 같아 최종 디자인 시안 작업 이후에 2가지 컬러를 베리에이션 한 뒤 한번 더 체크했다. 핑크가 화사하긴 한데, 사진 분위기가 따뜻한 아이보리톤이고 어머님 한복이 하늘색이라 골드톤으로 fix.
인터랙션은 세 가지로 확정했다.
- 페이드인 스크롤: 섹션별 등장 애니메이션
- 복사하기 버튼 → 토스트 팝업: 버튼 문구는 그대로, 누르면 하단에 "주소가 복사되었습니다"가 올라왔다 사라지는 형태
- 연락하기 버튼 → tel 링크: 모바일에서 바로 전화 연결
디자인은 Gemini
카피라이팅과 와이어프레임 구조를 잡았다. 인사말 문구는 감성적인 톤, 정중한 톤, 경쾌한 톤 세 가지를 뽑아서 비교했고, 들어갈 콘텐츠를 넘기고, 전체 텍스트를 텍스트 와이어프레임 형태로 반환받았다.
- [타이틀] → [인삿말] → [사진] → [일시 및 장소] → [오시는 길]
순서가 확정된 후에는 피그마로 간단히 디자인하고, 사진을 셀렉했다.
상차림 예약하며 골라뒀던 독사진과, 어머님과 함께 찍은 가족 사진까지 얹고 나니 제법 그럴듯한 페이지 기획과 디자인 Fix.
구현은 Claude Code
확정된 디자인 시안과 인터랙션 스펙을 넘겼다.
초안은 Noto Serif KR, 크림/베이지 컬러 시스템, 여백 기준을 잡고 index.html로 뽑았다.
시안 이미지를 첫 프롬프트에 같이 넘겼어야 했는데, 텍스트로 컬러/여백 기준과 텍스트 스타일을 정리해서 넘기고 이미지는 2차 전달 자료로 끊기면서 시안의 포인트 컬러를 적용하거나, 버튼 컬러를 교정하는 작업을 추가로 해야했다.
[주요 수정 작업]
writing-mode: vertical-rlflex 역전 현상으로 이름 텍스트 순서가 뒤집히는 문제 → 교정
- 지도 버튼 브랜드 배경 제거 → 투명 +
#E5E5E5보더 +#333333텍스트로 통일
- 배포 이후 타겟을 고려한 본문 폰트 전체 +3px 추가 조정
기능 쪽은 복사하기 버튼 인라인 pill 형태, 연락하기 tel 링크, 지도 3종(네이버·카카오·T맵) 직링크까지 연결했다. 카톡으로 공유할거기때문에 OG 태그와 이미지까지 야무지게 만들어 넣었다.
GitHub Private 레포 생성하고 Vercel 정적 배포까지 스무스하게 클리어!
하루, 세 개의 AI, 역할 분리
짧은 시간에 뚝딱 만들어냈지만, 이렇게나 개인적인 작업물을 만들어보니 새삼 AI와 함께하는 삶에 익숙해지고 있다는 생각이 든다. 게다가 작업 별로 나도 모르게 자연스럽게 툴을 스위칭하며 컨텍스트를 옮겨 다니는데에도 익숙해져 간다.
클로드와는 초기 기획과 판단. 스택 결정, 컨셉 검토, 인터랙션 설계처럼 방향을 잡는 아이데이션 단계를 함께하고, 디자인 기획은 스레드를 분리할까 하다가 제미나이를 켰다. “일반적인 포맷”은 제미나이가 짱이지!
제미나이는 카피와 와이어프레임. 문구 여러 버전을 빠르게 뽑고 비교하면서 디자인 전 디자인 기획 작업을 함께 했는데, 실사 이미지를 넣고 싶었기 때문에 사진 보정과 텍스트와 사진의 배치를 고민하느라 막상 디자인할 때는 AI의 도움을 많이 못받았다. 디자인 작업을 할 일이 많지 않아, “초기 이미지를 넣고” 히어로 이미지를 뽑아낼 생각을 못했던게 지금 생각해보면 아쉬운 포인트. 시간을 더 절약할 수도 있었을 것이다.
Claude Code로는 구현과 배포. 완료된 디자인 시안과 스펙을 넘기고, 30분만에 초기 작업과 수정까지 빠르게 완료할 수 있었다. 여러 cli를 써봤지만, 아직까진 클로드 코드가 제일 만족도가 높은 것 같다. sonnet 4.6 모델로도 아직 거뜬하다. 초기 구축부터 디테일 수정까지 빠르게 반영했다.
처음부터 끝까지 혼자서도 할 수 있는 작업이었지만, 각 AI를 역할별로 분리해서 쓰니 확실히 속도가 달랐다. AI Native로 일하기에서 AI Native로 집안행사 챙기기까지 나날이 성장하는 중 😎