소개
Anthropic의 공식 frontend-design plugin을 활용해, google AI studio로 제작한 랜딩페이지 디자인을 클로드 코드로 점검하고 개선해보았습니다. 전체적인 화면 레이아웃 뿐만 아니라 타이포그래피, 인터랙션, 접근성, 반응형까지 구조적으로 점검하고 개선 계획을 제시해 주는 점이 인상적이었습니다.
진행 방법
사용한 도구
Anthropic 공식
frontend-designplugingoogle AI Studio
VS code + Claude code
사용한 프롬프트
프로젝트 구조 이해
: AI studio에서 파일을 다운로드 받아서 클코에게 분석을 시켰습니다.
parents-coaching-main 폴더 파일 내용을 확인해.디자인 개선 전략 수립: 플러그인 URL을 클코에게 주고 글로벌 스킬로 만들어달라고 한 후 개선 작업을 시켰습니다.
글로벌 스킬인 frontend-design 으로 parents-coaching-main 폴더의 페이지 디자인을 개선해보자. 계획을 세워봐.모바일 최적화
: 모바일 스크릿샷을 주고 개선해보라고 했습니다.
모바일 화면에서 깨져보이는데, 모바일 최적화는 어떻게 하면 될까?
글로벌 스킬인 frontend-design 스킬로 점검하고 개선 계획을 세워봐.결과 화면 비교
PC - Before
PC - After
주요 디자인 개선 사항
폰트: Outfit → Pretendard (한국 웹 표준 폰트)
Header: 스크롤 감지 축소, 그림자 강화, 네비게이션 hover 효과
Hero: 2컬럼 레이아웃, stagger 애니메이션, CTA 강화
상황 선택 카드: 인터랙션 애니메이션 및 접근성 개선
How It Works: 스크롤 기반 애니메이션 및 연결선 시각화
Before/After: 채팅 버블 UI 및 예시 전환 인터랙션
CTA: 시각적 강조 및 행동 유도 메시지 강화
Footer: 반응형 패딩 및 SVG 구분선 추가
글로벌 스타일: fadeInUp 애니메이션, focus-visible 접근성 개선
Mobile - Before/After
모바일 환경에서의 가독성과 레이아웃 안정성 개선
Hero 타이틀 크기 축소 (36px → 26px)
패딩 및 간격 재조정
버튼 및 배지 크기 최적화
배경 요소 크기 축소 (텍스트 침범 방지)
카드 간격 및 아이콘 크기 조정
결과와 배운 점
텍스트 가독성이 크게 개선되고, PC 화면과 모바일 화면 모두 레이아웃 안정성 확보되었습니다. 특히 전체 UI가 AI가 만든 초안 느낌이 사라졌다는 점이 놀라웠습니다.
plugin이 전문 디자이너로 완성도 있게 다듬어준다는 느낌이 들었습니다. (물론, 디자이너 분들이 보시기엔 많이 미흡하겠지만요. ^^)
다음에 시도해 볼 것은 랜딩페이지 다음에 디자인 일관성을 유지한 서브 페이지를 연결해보는 작업을 해보려 합니다.
도움 받은 글
스터디장 혜련님이 공유해주신 교안과 참고자료 (디자인 용어/skill 레퍼런스)
