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