18강: 디자인 레벨업
AI가 만든 티 벗기기
최고급 스테이크, 일회용 접시에 담으시겠어요?
17강까지 달려온 PART 4(검증과 배포) 과정이 마무리되었어요. 오류를 검증하고, 세상에 서비스를 배포하시느라 정말 고생 많으셨어요.
오늘부터는 대망의 PART 5(실전과 확장) 에 진입해요. 18강부터 20강까지는 만들어둔 서비스를 더 진짜같이, 더 훌륭하게 다듬는 실전 팁을 다뤄요.
그 첫 번째 주제는 바로 '디자인'이에요.
우리는 코딩을 1줄도 몰라요. 그래도 AI 덕분에 완벽하게 동작하는 서비스를 만들었어요. 하지만 화면을 가만히 띄워놓고 보면 무언가 허전해요.
딱 'AI가 대충 만들어준 티' 가 나기 때문이에요.
비유하자면 이래요. 정말 맛있는 최고급 스테이크를 구웠어요. 그런데 쭈그러진 일회용 종이 접시에 툭 담아서 손님에게 내놓은 격이에요.
반면, 소문난 맛집은 플레이팅(담음새)부터 예술이에요. 우리는 눈으로 먼저 음식을 먹기 때문이에요.
우리가 만든 훌륭한 서비스도 예쁜 접시에 정성껏 담아야 해요. 코드 한 줄 몰라도, 디자이너가 아니어도 괜찮아요.
오늘, 완벽한 플레이팅을 위한 마법의 주문을 알려드릴게요.
이건 뭐예요?
"클로드야, 내 사이트 좀 예쁘게 해줘."
바이브 코딩을 처음 하시는 분들이 가장 많이 하는 주문이에요. 저 역시 초보 시절에 이 말을 수백 번은 쳤던 것 같아요.
결과가 어땠을까요? 색깔이 촌스럽게 덕지덕지 붙거나, 글씨가 요란해져서 오히려 더 조잡해지곤 했어요.
왜 그럴까요? AI에게 "예쁘게"라는 말은 너무 모호하기 때문이에요.
레스토랑에 가서 요리사에게 "맛있게 요리해 주세요"라고 하는 것과 같아요. "소고기를 미디엄 레어로 굽고, 레드와인 소스를 뿌려주세요"라고 해야 원하는 요리가 나와요.
AI에게도 구체적인 '스타일 이름' 을 알려주어야 해요. 디자인 세계에는 수많은 스타일(미학 방향)이 존재해요.
우리는 복잡한 디자인 이론은 몰라도 돼요. 그저 스타일의 이름만 알면 돼요. 구현하는 코드는 AI가 알아서 짤 테니까요.
완전 초보자도 바로 가져다 쓸 수 있는 대표적인 미학 5가지를 소개할게요.
1. Glassmorphism (글래스모피즘)
유리처럼 반투명한 요소를 사용하는 스타일이에요. 배경 이미지가 은은하게 비치는 효과를 줘요. 애플(Apple) 기기 화면이나 iOS 설정 앱에서 흔히 보는 그 세련된 느낌이에요. 애플이 2025년부터 아이폰·맥에 쓰고 있는 리퀴드 글래스(Liquid Glass) 디자인도 여기서 갈라져 나온 갈래예요. 고급스러운 금융 앱이나 포트폴리오 사이트에서 자주 쓰여요.
2. Brutalism (브루탈리즘)
날것 그대로의 투박하고 대담한 디자인이에요. 꾸밈을 최소화하고 큼직하고 투박한 글씨로 승부해요. Bloomberg 뉴스 사이트나 Craigslist 같은 곳에서 볼 수 있는 거친 매력이에요. 최근 힙한 브랜드에서 일부러 이 스타일을 골라 쓰기도 해요.
3. Minimalist (미니멀리스트)
군더더기를 다 빼고 깔끔함의 극치를 보여줘요. 여백이 아주 많고, 선이나 색상 사용을 극도로 제한해요. 노션(Notion) 이나 구글 검색 페이지를 떠올리면 딱이에요. 단정하고 신뢰감을 주어야 하는 서비스에 제격이에요.
4. Retro-Futurism (레트로 퓨처리즘)
과거 사람들이 상상했던 미래의 모습이에요. 80년대 오락실 게임기 같으면서도 우주선 같은 오묘한 느낌이에요. 영화 "트론(Tron)" 이나 "블레이드 러너" 를 떠올리면 딱 맞아요. 향수와 사이버틱함을 동시에 줘요.
5. Neubrutalism (뉴브루탈리즘)
굵고 뚜렷한 검은색 테두리, 시커먼 그림자를 사용해요. 거기에 쨍하고 밝은 팝 컬러를 과감하게 배치해요. Figma 커뮤니티 페이지나 Gumroad 사이트에서 이 느낌을 볼 수 있어요. 장난감이나 만화책처럼 개성 넘치고 통통 튀는 스타일이에요.
앞의 2번 브루탈리즘과 헷갈리기 쉬운데, 한 줄로 가르면 이래요. 브루탈리즘은 꾸밈을 아예 걷어낸 쪽(무채색·무장식)이고, 뉴브루탈리즘은 그 투박함에 검은 테두리와 쨍한 팝 컬러를 얹어 일부러 멋을 낸 쪽이에요.
이제 "예쁘게 해줘"라는 말은 잊으세요. "내 로그인 페이지를 미니멀리스트 스타일로 만들어줘"라고 주문해 보세요. 화면이 180도 달라질 거예요.
우리는 이렇게 쓰고 있어요
지금 여러분이 글을 읽고 계신 이 오토프로그 랩스 사이트도 처음엔 평범했어요. 저는 이 사이트에 저만의 철학과 디자인을 입히고 싶었어요.
그래서 HOLOGRID(홀로그리드) 라는 테마를 직접 기획했어요.
4종 목업에서 1종을 고르기까지
처음부터 딱 하나의 디자인을 밀어붙이진 않았어요. AI에게 "내가 원하는 느낌에 맞춰서 4가지 다른 스타일로 목업(미리보기 시안)을 짜줘"라고 요청했어요.
그렇게 나온 4종의 시안은 각각 완전히 다른 분위기였어요.
| 번호 | 코드명 | 느낌 |
|---|---|---|
| Style 1 | HOLOGRID | 사이버틱 커맨드 센터 (최종 선택) |
| Style 2 | Neo-Tokyo | 네온 간판이 빛나는 도쿄 뒷골목 |
| Style 3 | Quantum Silk | 부드럽고 고급스러운 실크 터치 |
| Style 4 | Neural Grid | 신경망을 시각화한 그리드 패턴 |
이 4개의 시안은 지금도 저희 프로젝트의 static/mockups/ 폴더에 소중히 보존되어 있어요.
나중에 밝은 화면을 좋아하는 분들을 위해 BRUTAL LIGHT라는 시안을 하나 더 만들어서, 지금은 총 5종이 들어 있어요.
이 5번째 시안이 지금 사이트 오른쪽 위 해/달 버튼을 눌렀을 때 나오는 라이트 모드가 되었어요.
저는 4개의 시안을 띄워두고 한참을 고민했어요. 제가 원했던 건 흔해 빠진 교육 사이트가 아니었어요.
영화 '블레이드 러너 2049' 에 등장하는 어둡고 묵직한 커맨드 센터(지휘 통제소)의 느낌. 그 차가우면서도 미래적인 감성을 원했어요.
그래서 선택한 1종의 시안을 바탕으로 AI에게 이렇게 주문했어요.
"이 화면을 영화 블레이드 러너 2049의 커맨드 센터 미감으로 만들어줘."
어설프게 "멋있게 해 줘"라고 할 때와는 반응이 달랐어요. 명확한 영화 이름과 상황을 비유로 던져주니 AI가 단번에 찰떡같이 이해했어요.
어두운 심연 같은 배경, 그 위를 날카롭게 가로지르는 형광색 빛줄기. 우리가 원하던 사이버틱한 분위기가 단숨에 완성되었어요.
색상과 폰트의 힘
스타일과 비유를 정하셨나요? 그렇다면 이제 화면의 인상을 결정짓는 두 가지 무기가 남았어요.
바로 색상과 폰트(글꼴) 예요.
초보자분들이 가장 흔하게 하는 실수가 있어요. 화면에 너무 많은 색과 너무 다양한 폰트를 우겨넣는 거예요. 이러면 화면이 금세 조잡해지고 시선이 분산돼요.
규칙은 아주 단순해요. 색상은 딱 3개, 폰트는 딱 2개만 정하세요.
이 규칙만 지켜도 화면 전체에 놀라운 통일감이 생겨요.
색상 3개의 마법
- 배경색: 화면에서 가장 넓은 면적을 차지하는 기본 바탕색이에요.
- 텍스트색: 글씨를 편안하게 읽을 수 있게 해주는 색이에요.
- 포인트색: 버튼이나 중요한 알림 등 시선을 사로잡아야 할 곳에만 쓰는 색이에요.
폰트 2개의 마법
- 제목용 폰트: 굵고 크며, 내 서비스의 개성을 강하게 뽐내는 글꼴이에요.
- 본문용 폰트: 작게 써도 눈이 아프지 않고 또렷하게 잘 읽히는 깔끔한 글꼴이에요.
우리 오토프로그 랩스 사이트의 HOLOGRID 테마는 이 규칙을 철저히 따르고 있어요.
- 배경색: 우주의 깊은 어둠을 닮은 짙은 먹색 (
#0B0D0C) - 텍스트색: 오래 봐도 눈이 편한 밝은 회색 (
#A9B0AB) — 제목만 더 밝은 흰색 (#E8ECE9) - 포인트색: 디지털의 빛을 닮은 형광 연둣빛 (
#4ADE80) - 본문·제목 폰트: 한글이 또렷하게 읽히는
Pretendard - 포인트 폰트: 기계적이고 미래적인 느낌의
Chakra Petch— 메뉴·라벨처럼 눈에 띄어야 하는 자리에만
코드 블록처럼 "컴퓨터 화면 같아야" 하는 자리에는 JetBrains Mono·Share Tech Mono 같은 고정폭 글꼴을 따로 씁니다.
frontend-design 스킬의 공식 지침서에는 "요즘 AI가 만든 디자인이 자꾸 몰리는 뻔한 조합" 세 가지가 적혀 있어요.
그중 하나가 "거의 검정에 가까운 배경 + 쨍한 형광 연두 포인트 하나" 예요.
눈치채셨나요? 방금 보신 HOLOGRID 레시피가 정확히 거기에 걸려요.
그래서 저희가 무엇을 다르게 했는지 말씀드릴게요.
화면 전체에 44px 간격의 옅은 모눈종이 격자를 한 겹 깔고, 마우스를 움직이면 그 격자가 천천히 밀리게 했어요. (도면 위에 서 있는 듯한 느낌, 이 사이트의 시그니처예요.)
본문은 한글이 또렷한 Pretendard로 굵기 위계를 잡았고, 각진 영문 글꼴은 메뉴·라벨 자리에만 대문자로 넓게 벌려 썼어요.
본문 색은 배경 대비 8.62:1로 직접 계산해서 오래 봐도 눈이 아프지 않게 맞췄고, 밝은 화면을 좋아하는 분을 위해 라이트 모드도 따로 만들었고요.
AI가 흔히 쓰는 색 조합에서 출발하는 건 잘못이 아니에요. 거기서 멈추면 "AI가 만든 티"가 나고, 질감·글꼴·읽기 편함처럼 내 서비스에만 맞는 결정을 하나씩 얹으면 그때부터 내 디자인이 돼요. 여러분도 마음에 드는 조합에서 출발하시고, 대신 거기서 한 걸음씩만 더 나가 보세요.
처음엔 멋있어 보인다고 본문까지 영문 전용 글꼴(Share Tech Mono) 로 깔았어요.
영어는 근사했는데, 한글이 뭉개져서 읽기가 너무 힘들었어요.
그래서 본문은 한글 가독성이 좋은 Pretendard로 되돌리고, 개성 있는 영문 글꼴은 라벨과 코드 자리에만 남겼어요.
멋보다 읽히는 게 먼저예요. 한글 서비스라면 본문 글꼴은 꼭 한글이 예쁜 걸로 고르세요.
어떤가요? 딱 필요한 것만 골라서 썼을 뿐인데, 전문가의 손길이 닿은 것처럼 정돈되어 보이지 않나요?
색상 3개를 직접 고르기 어려우면 Coolors 같은 무료 팔레트 생성기를 활용해 보세요. 스페이스바만 누르면 어울리는 색상 조합이 자동으로 나와요. 마음에 드는 3개를 골라서 AI에게 "이 색상으로 통일해줘"라고 전달하면 돼요.
한번 써볼까요?
마법의 단어(스타일 이름)도 알았고, 색상 3개와 폰트 2개의 규칙도 알았어요.
하지만 "이걸 어떻게 내 코드에 적용하지?" 막막하실 수 있어요. 코딩을 1줄도 모르는 우리를 도와줄 강력한 도구가 준비되어 있어요.
바로 frontend-design 스킬이에요.
이 도구는 클로드(Claude)를 만든 앤스로픽(Anthropic)에서 공식적으로 배포한 디자인 전문 플러그인이에요.
(플러그인 = 클로드 코드에 끼워 넣는 추가 기능 꾸러미. 그 안에 frontend-design이라는 스킬, 즉 AI에게 주는 전문 지침서가 들어 있어요.)
이 스킬을 장착하면, 클로드가 프로 디자이너들의 패턴과 UI(사용자 인터페이스) 가이드를 참고해서 내 화면을 고쳐줘요.
우리가 CSS(화면을 꾸미는 복잡한 코드)를 직접 한 줄 한 줄 수정할 필요가 전혀 없어요.
더 자세한 설명은 frontend-design 스킬 안내 글에서 확인할 수 있어요.
스킬 설치하기
터미널에서 claude를 쳐서 클로드 코드 대화창을 먼저 연 다음, 대화창 안에 아래 두 줄을 차례로 입력하세요.
터미널 명령어가 아니라 클로드 코드 안에서 쓰는 명령이라, 앞에 !를 붙이지 않아요.
/plugin install frontend-design@claude-plugins-official
/reload-plugins
첫 줄이 앤스로픽 공식 목록에서 디자인 플러그인을 내려받아 설치하고, 둘째 줄이 클로드 코드를 껐다 켜지 않고도 방금 설치한 걸 곧바로 반영해 줘요.
Marketplace "claude-plugins-official" not found라는 빨간 글씨가 나오면, 공식 목록이 아직 등록되지 않은 거예요.
아래 한 줄을 먼저 실행한 다음 위 설치 명령을 다시 하세요.
/plugin marketplace add anthropics/claude-plugins-official
/plugin 명령 자체가 없다고 나오면 클로드 코드가 옛날 버전이에요. 3강에서 쓴 설치 명령어를 한 번 더 실행해서 최신으로 올려주세요.
설치가 잘 됐는지 확인하려면 대화창에 /plugin을 치고 Installed(설치됨) 탭에서 frontend-design이 보이는지만 확인하면 돼요.
클로드 코드 터미널에서는 이렇게
frontend-design 스킬이 설치되었다면, 이제 마법을 직접 부려볼 차례예요. 클로드 코드 대화창을 열고, 아래 프롬프트 예시를 참고해서 여러분의 서비스에 직접 말을 걸어보세요.
클로드 코드 대화창에서 !를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요. 결과가 나오면 클로드가 한마디 덧붙여 주기도 해요.
단, !는 터미널에서 연 클로드 코드에서만 되고, VS Code 확장 프로그램의 채팅 창에서는 안 돼요.
아래 프롬프트들은 AI에게 말로 시키는 것이기 때문에 ! 없이 그대로 입력하면 돼요.
/frontend-design이라고 칠 필요 없어요이 스킬은 한 번 설치해 두면 알아서 켜집니다. "화면을 이렇게 바꿔줘" 같은 디자인 요청을 하면 클로드가 스스로 이 스킬을 꺼내 읽고 작업해요. 그래서 아래 예시들도 슬래시 없이, 그냥 하고 싶은 말을 적으면 돼요.
1. 글래스모피즘으로 고급스럽게 만들기
지금 로그인 페이지를 Glassmorphism 스타일로 리디자인해줘.
배경이 은은하게 비치는 반투명 카드를 사용하고, 애플 기기처럼 고급스러운 느낌을 강조해줘.
2. 미니멀리스트로 깔끔하게 정리하기
너무 복잡한 이 대시보드 화면을 Minimalist 스타일로 깔끔하게 정리해줘.
불필요한 테두리나 선은 모두 없애고, 여백을 넉넉하게 줘서 사용자의 눈이 편안하게 만들어줘.
3. 영화 느낌으로 개성 부여하기
메인 페이지를 영화 '블레이드 러너 2049'의 커맨드 센터 느낌으로 통째로 바꿔줘.
배경은 아주 어둡고 무겁게 가라앉히고, 버튼 같은 포인트 컬러는 형광색으로 해서
사이버틱한 분위기를 내줘.
4. 색상과 폰트를 한꺼번에 지정하기
사이트 전체의 색상을 통일해줘.
배경색은 #1a1a2e, 텍스트색은 #eaeaea, 포인트색은 #e94560으로 설정하고,
제목 폰트는 Poppins, 본문 폰트는 Pretendard로 바꿔줘.
5. 수정 결과 확인하기
클로드가 코드를 수정하고 나면, 로컬 서버를 띄워서 바로 확인해 봐요.
# 로컬 개발 서버를 띄워서 수정 결과를 눈으로 확인해요
# (11강에서 배웠던 명령어예요)
npm run dev
개발 서버처럼 켜 두고 계속 쓰는 명령은 클로드 창 말고 새 터미널 창에서 켜세요. 클로드 창에서 켜면 서버가 그 창을 계속 붙잡고 있어서 다음 대화를 못 하거든요. (17강에서도 짚었던 요령이에요)
브라우저에서 localhost:3000에 접속하면 바뀐 화면을 바로 볼 수 있어요.
디자인은 한 번에 마음에 들기 어려워요. 화면을 보고 "포인트색이 너무 튀어" 같은 느낌을 그대로 다시 말해주면서 두세 번 다듬는 게 정상이에요.
위 프롬프트를 입력하고 나면 클로드가 알아서 디자인을 고민하고 코드를 수정해요. 방금 전까지 밋밋하고 투박해서 "AI가 대충 짠 티"가 나던 화면이, 마치 경력 10년 차 수석 디자이너가 정성스레 매만진 "프로의 화면"으로 탈바꿈하게 돼요.
이번 강에서 기억할 것
- 구체적인 스타일 이름을 쓰세요. AI에게 "예쁘게"는 통하지 않아요. "글래스모피즘", "미니멀리스트"처럼 정확한 이름을 불러주세요.
- 색상은 3개, 폰트는 2개만 기억하세요. 너무 많은 색과 화려한 폰트들은 화면을 조잡하게 만들어요. 절제할수록 더욱 멋져요.
- 비유를 적극적으로 활용하세요. 원하는 특정 영화의 장면이나 사물의 느낌을 말해주면, AI가 분위기를 훨씬 더 잘 이해하고 반영해요.
frontend-design스킬을 한 번만 설치해 두세요./plugin install frontend-design@claude-plugins-official한 줄이면 끝이고, 그다음부터는 디자인 요청을 할 때마다 알아서 켜져요. 우리는 코드를 몰라도 돼요. 스킬을 활용하면 프로 수준의 디자인을 거뜬히 입힐 수 있어요.
이런 분께 추천해요
- 기능은 다 돌아가는데 화면이 왠지 모르게 촌스러워 보이는 분
- "좀 예쁘게 고쳐줘"라고 수십 번 말해도 AI가 엉뚱한 결과만 내놓아 답답한 분
- 디자인 감각이 전혀 없어서 매번 남의 템플릿만 베껴 쓰시던 분
- 나만의 뚜렷한 개성을 담은 독창적인 서비스 화면을 갖고 싶은 분
참고 링크
- 오토프로그 랩스 frontend-design 스킬 안내
- Claude Code 공식 문서
- Refactoring UI (디자인 기본기를 탄탄하게 다져주는 추천 도서)
- Coolors (무료 색상 팔레트 생성기)
▸개정 이력5건
- v52026-07-19본문에 남아 있던 슬래시 표기(`/frontend-design`)를 평문 스킬 이름으로 정리 — 이 스킬에는 슬래시 커맨드가 없다는 v2 방침과 정합(팁 박스의 반례 인용 1곳은 의도적으로 유지)
- v42026-07-19frontend-design 스킬 안내 글(v3)과의 정합 맞춤 2건. 5. Neubrutalism 절에 2. Brutalism과의 차이를 한 줄로 구분하는 문장 추가(무채색·무장식 vs 검은 테두리+팝 컬러) — 스킬 글도 같은 기준으로 통일. HOLOGRID 레시피 아래에, 이 팔레트가 스킬이 경계하는 'AI 기본값(거의 검정 배경 + 형광 연두 포인트)'과 겹친다는 점을 인정하고 무엇으로 차별화했는지(모눈 격자 파럴랙스, Pretendard 굵기 위계, 영문 글꼴은 라벨 한정, 대비 8.62:1, 라이트 모드) 밝히는 note 박스 신설 — '기본값에서 출발해도 자기 것으로 만들면 된다'는 교육적 사례로 활용
- v32026-07-191~20강 공통으로 반복되던 `!` 셸 모드 안내 문구를 하나로 통일 — 실행 결과에 클로드가 한마디 덧붙인다는 현행 동작과, 터미널에서 연 클로드 코드에서만 되고 VS Code 확장 채팅 창에서는 안 된다는 조건을 추가
- v22026-07-19frontend-design 설치법을 실제로 되는 절차로 교정 — 존재하지 않는 `claude skill add anthropic/frontend-design` 대신 클로드 코드 대화창의 `/plugin install frontend-design@claude-plugins-official` + `/reload-plugins`, 마켓플레이스 미등록 대비 안내 신설. 스킬은 자동 발동이라 프롬프트 예시 4개에서 `/frontend-design 스킬을 사용해서` 접두어 삭제. HOLOGRID 레시피 색상·폰트를 현행 사이트 실제 값(배경 0B0D0C / 본문 A9B0AB / 포인트 4ADE80, Pretendard + Chakra Petch)으로 정정하고 한글 본문에 영문 전용 글꼴을 쓰면 안 되는 이유 추가(예시 프롬프트의 본문 폰트도 Inter→Pretendard). PART 5 범위를 18~21강→18~20강으로 정정(20강 표와 일치), 목업 시안 5종·라이트 모드 채택 반영, `npm run dev`는 새 터미널 창에서 켜라는 주의를 17강 v2와 통일
- v12026-04-13초판