Claude Code & Design로 회사 홈페이지 변경안 만들기
소개
회사 홈페이지를 새로 디자인해보고 싶었습니다. 문제는 "어떤 톤으로, 무엇을 참고해서" 만들지였죠. 그래서 레퍼런스 사이트의 디자인을 역추출 → 우리 브랜드로 이식 → 실제 콘텐츠 연결 → 재사용 가능한 디자인 시스템으로 저장하는 흐름을 Claude Code(앱)와 Claude Design(claude.ai/design)으로 한 번에 해봤습니다.
같은 Synopsys의 디자인 언어를 참고 뼈대로 삼고, 색·콘텐츠는 회사의 기본색으로 채우는 방식입니다.
진행 방법
사용 도구: Claude Code(Opus 4.8) · designlang(디자인 추출 CLI) · Claude 내장 브라우저 · Claude Design
1단계 — 참고 사이트 디자인 추출
Synopsys 사이트의 디자인 토큰을 뽑았습니다. 사용한 프롬프트:
사이트를 바꿔서 다시 디자인 추출하고 싶은데 … npx designlang https://www.synopsys.com/
2298개 요소를 분석해 색·폰트·간격·컴포넌트를 35종 파일로 추출. 노이즈 교정이 핵심이었는데, "폰트 5종"으로 잡힌 게 실제로는 Roboto 1종 + 아이콘폰트(VideoJS·Font Awesome) 오인이었습니다.
📸 (캡처: synopsys-design-system.html — 교정된 색·타이포 문서)
2단계 — 참고 디자인을 AAA로 이식
synopsys 디자인을 참고해서 회사 홈페이지를 만들고 싶은데 어떻게 해야해?
뼈대 = Synopsys(Roboto·얇은 헤드라인·그라디언트·각진 카드), 색·내용 = AAA로 조합. 브랜드 색은 사내 /ppt 스킬에 정의된 AAA네이비 #0C2F8D 로 확정했습니다. 교정한 토큰 일부:
결과가 맘음에 안들어서 다시 PRD 부터 시작
3단계 — 디자인 PRD 인터뷰 → 페이지 재생성
디자인 PRD를 나에게 인터뷰해서 확인하고 페이지를 다시 생성해줘
Claude가 4가지(목표·범위·무드·언어)를 객관식으로 물어봐 요구사항을 확정 → 다크 테크 무드 / 풀 랜딩 / 영어 글로벌 / 대표 홈으로 PRD를 정 리하고 페이지를 다시 만들었습니다.
📸 (캡처: AAA-landing-v2-dark.html — 다크 플래그십 랜딩)
4단계 — 실제 콘텐츠 연결 (브라우저로 크롤링)
원래 사이트에서 resources 에서 뉴스랑 publication 등을 가져오면 좋겠어
Claude 내장 브라우저로 AAA.com/news·/publications에 접속해 실제 뉴스을 가져와 플레이스홀더를 교체했습니다.
5단계 — 재사용 가능한 디자인 시스템으로 저장
컴포넌트별 @dsCard 카드 + 토큰으로 패키지화해 Claude Design에 "AAA flagship (dark)" 프로젝트로 업로드. 각 미리보기 파일 첫 줄에 마커 한 줄이면 카드가 자동 인식됩니다:
📸 (캡처: claude.ai/design의 AAA flagship (dark) 프로젝트 카드들)
결과와 배운 점
결과: 레퍼런스 추출 → 브랜드 이식 → 실제 뉴스/논문 연결 → 디자인 시스템 저장까지, 한 대화 안에서 다크 테마 플래그십 홈페이지 변경안을 완성했습니다. Hero·지표·솔루션·News·Publications·FAQ·CTA로 구성된 풀 랜딩 1장 + 재사용 컴포넌트 10종.
나만의 꿀팁
🔑 "PRD 인터뷰 시켜"가 신의 한 수. 막연하게 "만들어줘"보다, Claude에게 목표·범위·무드·언어를 객관식으로 물어보게 하니 결과물 방향이 확 잡혔습니다.
🔑 콘텐츠는 지어내지 말고 진짜를 크롤링. Claude 브라우저로 실제 뉴스/논문을 긁어오니 신뢰도 가 확 올라갔습니다.
🔑 여러가지 선택지에 대해서 비교를 할 수가 없어서 샘플 페이지를 만들어 달라고 요청해서 비교 후 선택하니 좋았습니다.
시행착오
처음에 만든 것은 너무 간단하게 나오고 대충 만든 티가 났는데, PRD를 설정하고 난후에 작성한 것은 훨씬 발전된 모습이였습니다,
로고 색상(상단 파랑/하단 흰색)처럼 디테일은 몇 번 오가며 맞췄습니다.
도움이 필요한 부분
나온 결과가 llm만 사용한 것인지 아닌지, 원하는 모습으로 하기 위해서는 어떤 부분을 고쳐야 하는지 디자인 측면에 대해서 아는 바가 없어서 나은 결과를 만들기 어려운 점이 있습니다.
앞으로의 계획
저장한 alsemy flagship (dark) 시스템으로 채용·IR·제품 상세 페이지를 같은 톤으로 확장.
다양한 사이트에 대해서 학습시키고 예시를 작성하게 한다음에 우리 회사에 적용할 만한 것을 찾아내야 할것 같습니다.
