frontend-design

AI에게 디자인 감각을 입히는 공식 스킬

이건 뭐예요?

인테리어 업체에 집 꾸미기를 맡기는 장면을 떠올려 보세요. "모던하게요"라고만 말하면 결과물이 천차만별이지만, "화이트 톤 미니멀 + 무드등 + 원목 가구"처럼 구체적인 스타일 이름을 대면 원하는 결과에 훨씬 가까워지죠.

frontend-design은 바로 그 디자인 팀장 같은 역할을 하는 Claude Code 스킬(skill, 특정 작업을 위한 AI 지침 세트)이에요. Anthropic(앤쓰로픽, 클로드를 만든 회사)이 직접 만들어 공식 마켓플레이스에 배포한 플러그인이고, 2026년 7월 기준 100만 회 이상 설치된 인기 스킬이에요.

이 스킬을 설치해 두면 "랜딩 페이지 하나 만들어줘"라고 시키더라도 Claude가 코드부터 쓰지 않아요. 먼저 디자인 계획을 세우고 그 계획을 스스로 한 번 깐 다음에 코드를 씁니다. 계획에는 네 가지가 들어가요.

1. 색(Color) — 이름을 붙인 색 4~6개짜리 팔레트
2. 글꼴(Type) — 개성을 담당하는 제목용, 잘 읽히는 본문용 등 역할별 2개 이상
3. 레이아웃(Layout) — 화면을 어떻게 배치할지에 대한 구상
4. 시그니처(Signature) — 이 화면을 기억에 남게 할 단 하나의 특별한 요소

곧바로 만들지도 않아요. "이거 아무 페이지에나 갖다 써도 어울리는 뻔한 안 아닌가?" 를 스스로 되묻고, 뻔한 부분을 고친 뒤에야 코드를 써요. 이 자기 검열 단계 덕분에 평범한 "AI가 만든 티 나는" 결과물 대신 의도가 담긴 프로급 디자인이 나와요. 폰트 선택부터 색상 팔레트, 애니메이션, 여백까지 전부요.

한 줄로 말하면 이래요. "AI에게 디자인 감각을 입혀주는 스타일북."

우리는 이렇게 쓰고 있어요

지금 여러분이 보고 계신 오토프로그 랩스도 frontend-design 스킬을 활용해 만들었어요.

HOLOGRID 테마의 탄생 과정. 이 사이트의 테마 이름은 HOLOGRID예요. 블레이드 러너 2049의 커맨드 센터에서 영감을 받은 다크 테마인데, 지금 쓰고 있는 값은 이래요.

• 배경색: 깊은 어둠을 닮은 짙은 먹색 (#0B0D0C)
• 본문 텍스트색: 오래 봐도 눈이 편한 밝은 회색 (#A9B0AB) — 제목은 더 밝은 #E8ECE9
• 포인트색: 디지털의 빛을 닮은 형광 연둣빛 (#4ADE80)
• 본문·제목 폰트: 한글이 또렷하게 읽히는 Pretendard
• 포인트 폰트: 기계적이고 미래적인 Chakra Petch — 메뉴·라벨처럼 눈에 띄어야 하는 자리에만

처음에 "어둡고 묵직한 커맨드 센터 느낌으로 만들어줘"라고 시켰을 때, frontend-design 스킬이 활성화되면서 Claude가 단순히 색만 바꾸는 게 아니라 폰트 조합, 카드 테두리의 반투명 효과, 마우스를 올리면 빛나는 그라데이션까지 한 세트로 디자인해 줬어요.

초기 버전은 본문까지 영문 전용 글꼴(Share Tech Mono)로 깔았다가 한글이 뭉개져서 본문을 Pretendard로 되돌렸어요. 개성 있는 영문 글꼴은 라벨과 코드 자리에만 남겼고요. 한글 서비스라면 본문 글꼴은 한글이 예쁜 걸로 고르세요. (이 과정은 18강에서 더 자세히 다뤄요.)

홈 화면 카드 레이아웃. autofrog.kr/lab 홈 화면의 네 카드(LECTURES, GITHUB REPOS, VIBE SKILLS, PROFILE)는 각각 번호와 라벨이 붙은 그리드 구조예요. "정보 밀도가 높지만 정돈된 느낌"에는 **"구조는 곧 정보다"**라는 원칙이 반영됐습니다. 번호나 라벨에는 장식이 아니라 순서나 분류처럼 실제 정보를 담아요.

"스타일 이름"을 알면 주문하기 쉬워요. 저도 코딩은 1줄도 모르지만, "Retro-Futuristic 느낌으로 해줘"라든가 "Glassmorphism 스타일 카드로 바꿔봐" 같은 디자인 스타일 이름을 알게 되면서 주문이 정확해졌어요. 그래서 아래 섹션에서 이 스타일 이름들을 하나씩 소개할게요.

디자인, 이름을 알면 주문이 쉬워요

여기서 한 가지 짚고 갈 게 있어요. 이 스킬 안에 "스타일 목록"이 메뉴판처럼 들어 있는 건 아니에요. 스킬이 시키는 건 오히려 반대로, 주제에서 출발해 그 브리프에만 어울리는 색·글꼴·레이아웃을 직접 설계하라는 쪽이에요.

스타일 이름은 내가 원하는 방향을 AI에게 전달하는 공용 어휘예요. 스킬이 잘 설계되어 있어도 내가 원하는 방향을 모르면 엉뚱한 데로 갈 수 있어요. "이 스타일로 해줘"라고 이름을 대주면 Claude가 그 방향에서 폰트·색상·애니메이션·레이아웃을 구체화해 줍니다. 공식 지침서에도 브리프가 방향을 못 박으면 그 말을 최우선으로 따르라고 적혀 있어요.

아래에서 대표적인 5가지를 자세히 소개하고, 나머지는 표로 정리할게요.

1. Glassmorphism (글래스모피즘)

반투명 유리 위에 빛이 번지는 느낌.

배경에 그라데이션이나 이미지를 깔고, 그 위에 backdrop-blur(배경 흐림 효과)가 적용된 반투명 카드를 올리는 스타일이에요. 마치 서리 낀 유리창 너머로 풍경을 보는 느낌이죠. Apple의 iOS나 macOS 인터페이스에서 자주 볼 수 있어요.

• 특징: 반투명 카드, 흐림 배경, 부드러운 그림자, 밝은 테두리
• 어울리는 곳: 대시보드, SaaS(서비스형 소프트웨어) 랜딩 페이지, 금융 앱

2. Brutalism · Neubrutalism (브루탈리즘 · 뉴브루탈리즘)

꾸미지 않은 날것 그대로의 힘.

건축에서 온 용어예요. 콘크리트를 그대로 드러내는 건축 양식처럼, 웹에서는 두꺼운 테두리(3~4px), 거친 그림자, 깨진 듯한 그리드, 큼직한 타이포그래피(글꼴 디자인)를 사용해요. "예쁘게"보다 "강렬하게"를 노리는 스타일입니다.

이름이 비슷한 두 가지가 자주 섞여 쓰이는데, 한 줄로 가르면 이래요. Brutalism(브루탈리즘)은 꾸밈을 아예 걷어낸 쪽이에요. 기본 HTML에 가까운 투박한 화면, 장식 없는 검은 글씨와 파란 링크가 특징이고 블룸버그·크레이그리스트 같은 사이트가 여기에 가까워요. Neubrutalism(뉴브루탈리즘)은 그 투박함을 일부러 디자인 언어로 끌어올린 쪽이라, 굵은 검은 테두리에 어긋나게 떨어지는 하드 섀도와 쨍한 팝 컬러를 얹어요. 피그마 커뮤니티나 검로드 화면이 대표적이죠. 바로 위 미리보기가 이 뉴브루탈리즘 쪽 예시예요.

• 공통 특징: 두꺼운 보더(테두리), 하드 섀도(딱딱한 그림자), 깨진 그리드, 대담한 색상 대비
• 갈리는 지점: 브루탈리즘은 무채색·무장식 / 뉴브루탈리즘은 검은 테두리 + 팝 컬러
• 어울리는 곳: 포트폴리오, 아티스트 사이트, 실험적 브랜드 페이지, 개발자 커뮤니티 서비스

3. Retro-Futurism (레트로 퓨처리즘)

과거가 상상한 미래, 네온과 CRT 모니터 감성.

1980년대 SF 영화에서 본 것 같은 네온 라인, 스캔라인 효과, 터미널 폰트가 특징이에요. 사이버펑크(Cyberpunk) 느낌이라고 해도 좋죠. 지금 보고 계신 오토프로그 랩스의 HOLOGRID 테마도 이 방향에 가까워요. 다크 배경 + 형광 포인트색(#4ADE80) + 라벨에 쓰는 각진 영문 폰트 조합이 레트로 퓨처리즘의 전형이거든요. 위 미리보기는 같은 계열로 잡은 시안이라 색만 다를 뿐, 원리는 같아요.

• 특징: 네온 색상, 어두운 배경, 글로우(발광) 효과, 모노스페이스 폰트, 스캔라인
• 어울리는 곳: 게임 사이트, 개발자 도구, AI/테크 서비스, 음악 스트리밍

4. Minimalist (미니멀리스트)

남는 건 여백, 빠지는 건 군더더기.

여기서의 미니멀은 "대충 만든 게 아니라 극도로 정제된"이라는 뜻이에요. 요소 하나하나의 크기, 위치, 간격을 밀리미터 단위로 조절해 "아무것도 더할 것이 없고, 아무것도 뺄 것이 없는" 상태까지 다듬어요. 스위스 디자인(Swiss Design)이라고도 불러요.

• 특징: 넉넉한 여백, 정밀한 타이포그래피, 제한된 색상(2~3색), 숨은 그리드
• 어울리는 곳: 브랜드 사이트, 이력서/포트폴리오, 프리미엄 제품 페이지

5. Soft/Pastel (소프트 파스텔)

파스텔 톤의 부드럽고 따뜻한 세계.

연분홍, 연보라, 민트, 베이비블루 같은 파스텔 색상을 바탕으로 둥글둥글한 모서리와 부드러운 그림자를 사용해요. 보기만 해도 편안한 스타일이죠. 건강, 교육, 어린이 관련 서비스에서 자주 보여요.

• 특징: 파스텔 팔레트(연한 색 조합), 큰 라운드 코너(둥근 모서리), 부드러운 그림자, 친근한 일러스트
• 어울리는 곳: 교육 플랫폼, 헬스케어 앱, 키즈 서비스, 라이프스타일 블로그

나머지 스타일 한눈에 보기

이 외에도 커뮤니티에서 자주 언급되는 확장 스타일이 있어요.

한번 써볼까요?

frontend-design은 Anthropic 공식 플러그인이에요. Claude Code 대화창 안에서 /plugin 명령으로 설치할 수 있어요. 공식 마켓플레이스(Anthropic이 관리하는 플러그인 저장소)에 등록되어 있어서, 별도 주소를 입력할 필요도 없죠.

/plugin install frontend-design@claude-plugins-official

/reload-plugins

둘째 줄은 Claude Code를 껐다 켜지 않고도 방금 설치한 걸 곧바로 반영해 주는 명령이에요.

이렇게 스타일 이름을 함께 적어주면 Claude가 그 방향을 출발점 삼아 폰트, 색상, 레이아웃, 애니메이션을 결정한 뒤 코드를 작성해요.

준비물은 Claude Code가 설치되어 있는 환경이면 충분해요. Claude Code가 아직 없다면 공식 설치 가이드를 먼저 참고해 주세요.

클로드 코드 터미널에서는 이렇게

아래 명령어를 클로드 코드가 실행되고 있는 터미널(PowerShell, 명령 프롬프트, Mac/Linux Terminal)에 그대로 복사해서 붙여 넣고 Enter만 누르세요.

# 1. Claude Code가 설치되어 있는지 확인 (버전 번호가 뜨면 OK)
claude --version

# 2. Claude Code를 실행 (프로젝트 폴더에서)
claude

Claude Code가 실행되면, 아래 명령어를 Claude Code 대화창 안에서 입력하세요.

# 3. frontend-design 플러그인 설치 (Anthropic 공식 마켓플레이스에서)
/plugin install frontend-design@claude-plugins-official

# 4. 껐다 켜지 않고 바로 반영하기
/reload-plugins

설치 확인은 /plugin 명령어를 입력하면 열리는 플러그인 관리 화면의 Installed 탭에서 할 수 있어요. "frontend-design"이 목록에 보이면 성공이에요.

설치가 끝났으면 아래처럼 말로 시켜보세요. 앞에 슬래시를 붙이지 않고, 그냥 하고 싶은 말을 적으면 스킬이 알아서 켜져요.

AI 지식 아카이브 홈 화면을 Glassmorphism 스타일로 만들어줘

Claude가 알아서 반투명 유리 카드, 배경 블러, 부드러운 그라데이션을 조합한 HTML/CSS 코드를 만들어 줄 거예요. 다른 스타일을 써보고 싶으면 "Glassmorphism" 자리에 위에서 소개한 스타일 이름을 바꿔 넣으면 돼요.

몇 가지 활용 예시를 더 드릴게요.

# 브루탈리즘 스타일 포트폴리오
개인 포트폴리오 페이지 만들어줘. Brutalism 스타일로. 두꺼운 보더와 대담한 타이포.

# 럭셔리 스타일 제품 페이지
프리미엄 향수 브랜드 제품 페이지 만들어줘. Luxury/Refined 톤으로.

# 파스텔 톤 교육 플랫폼
초등학생 코딩 교육 대시보드 만들어줘. Soft/Pastel 스타일, 친근한 일러스트 느낌으로.

스타일 이름을 모르겠으면 그냥 분위기를 말해도 돼요. "차갑고 미래적인 느낌", "따뜻하고 자연적인 느낌"처럼 톤만 던져도 Claude가 가장 가까운 미학 방향을 골라서 적용해요.

플러그인을 삭제하고 싶다면 Claude Code 대화창에서 /plugin 명령어를 입력한 뒤 Installed 탭에서 해당 플러그인을 선택하고 삭제하면 돼요.

이런 분께 추천해요

frontend-design은 "멋진 웹 화면을 만들고 싶은데 디자인 용어도, 코드도 모르는" 모든 분을 위한 스킬이에요.

• "홈페이지 하나 만들고 싶은데 어떤 스타일이 있는지 모르겠어요"라는 비개발자. 위에서 소개한 스타일 이름 중 마음에 드는 걸 하나 골라서 말하면 끝이에요. 디자이너에게 시안을 의뢰하듯 AI에게 스타일 방향만 알려주면 돼요.

• 스타트업 대표인데 랜딩 페이지를 빠르게 만들고 싶은 분. "핀테크 서비스 랜딩 페이지, Glassmorphism 스타일로" 한 줄이면 production-grade(바로 배포 가능한 수준) 코드가 나와요. 디자이너 + 퍼블리셔 없이도 첫 번째 버전을 몇 분 안에 볼 수 있어요.

• 바이브 코딩을 배우는 중인데 "AI가 만든 티"를 없애고 싶은 분. 이 스킬 없이 만들면 매번 비슷한 그라데이션, 비슷한 폰트, 똑같은 카드 레이아웃이 나와요. frontend-design을 설치해 두면 Claude가 코드를 쓰기 전에 "이거 뻔하지 않나?"를 스스로 되물어서 AI 슬롭(AI slop, AI가 만든 티가 나는 천편일률적 결과물)에서 벗어날 수 있어요.

참고 링크

• 18강: 디자인 레벨업 — 실전 적용 강의
• Frontend Design 공식 플러그인 페이지 (Anthropic)
• claude-code/plugins/frontend-design (GitHub)
• SKILL.md 원본 (GitHub)
• Claude Code Skills 공식 문서
• Frontend Aesthetics Cookbook (Anthropic)