18강: 디자인 레벨업

AI가 만든 티 벗기기

오늘 끝나면 이런 걸 갖게 돼요. 지금 만든 서비스에 디자인 방향 하나를 정하고, 색과 글꼴을 통일한 화면을 확인해요.

1단계: 디자인 도구를 준비해요

먼저 frontend-design을 준비해요. 클로드 코드에 화면 디자인 기준을 더하는 플러그인(기능 꾸러미)이에요.

클로드 코드 대화창에 이렇게 말하세요.

앤스로픽 공식 플러그인 목록에서 frontend-design 디자인 플러그인을 설치해 줘.
공식 목록이 등록되지 않았다면 anthropics/claude-plugins-official을 먼저 등록하고 다시 설치해 줘.
설치가 끝나면 플러그인을 다시 불러오고, Installed 목록에서 설치 여부를 확인해 줘.

클로드 코드가 오래되어 설치 기능을 쓸 수 없다면 지금 환경에 맞는 업데이트 방법을 안내하고
내 승인을 받은 뒤 진행해 줘.

설치나 업데이트 승인 화면이 나오면 직접 확인해 주세요. 이것만 직접 하시면 나머지는 클로드가 해요.

설치가 끝나면 frontend-design이 Installed(설치됨) 목록에 보이는지 확인하세요. 더 자세한 내용은 frontend-design 스킬 안내에 있어요.

2단계: 디자인 방향을 하나 골라요

17강에서는 사용자 의견을 받아 기능을 고쳤어요. 이번에는 같은 서비스를 보기 편하고 일관된 화면으로 다듬어요.

맛있는 스테이크도 접시와 담음새에 따라 인상이 달라져요. 디자인도 이미 만든 내용을 어떤 분위기와 순서로 보여 줄지 정하는 일이에요.

7강에서 배운 것처럼 “예쁘게 해 줘”보다 참고할 스타일과 지킬 범위를 알려 주세요. 아래 다섯 가지 가운데 서비스에 맞는 방향 하나만 고르면 돼요.

브루탈리즘은 장식을 덜어내고, 뉴브루탈리즘은 투박한 구조에 검은 테두리와 밝은 색을 더해요.

3단계: 색상 3개와 글꼴 2개를 정해요

스타일을 골랐다면 색상은 배경, 본문, 포인트 세 가지로 좁혀 보세요. 글꼴은 제목용과 본문용 두 가지면 충분해요.

한글 본문에는 오래 읽어도 편한 글꼴을 쓰세요. 개성 있는 영문 글꼴은 제목이나 짧은 라벨에만 쓰는 편이 안전해요.

색을 고르기 어렵다면 Coolors에서 색 조합을 살펴보세요. 마음에 드는 색 세 개만 클로드에게 알려 주면 돼요.

4단계: 한 화면만 먼저 바꿔요

처음부터 사이트 전체를 바꾸지 마세요. 로그인이나 메인 화면처럼 자주 보는 한 화면을 골라 먼저 확인해요.

[ ] 안을 내 서비스에 맞게 바꾼 뒤 붙여 넣으세요.

frontend-design 스킬을 참고해서 [메인 페이지]의 디자인을 검토해 줘.
방향은 [미니멀리스트] 스타일로 잡아 줘.

배경색은 [#1a1a2e], 본문색은 [#eaeaea], 포인트색은 [#e94560]으로 제한해 줘.
제목 글꼴은 [Poppins], 한글 본문 글꼴은 [Pretendard]를 사용해 줘.

현재 기능과 글 내용은 바꾸지 말고, 모바일에서도 읽고 누르기 편해야 해.
먼저 현재 화면의 문제와 수정할 파일, 바뀔 모습을 짧게 설명해 줘.
아직 코드는 고치지 말고 내 확인을 기다려 줘.

계획에 필요 없는 기능이나 파일이 들어가면 빼 달라고 하세요. 방향이 맞으면 “계획대로 한 화면만 고쳐 줘”라고 답해요.

영화나 사물의 분위기를 빌려도 좋아요. “영화 ‘블레이드 러너 2049’의 지휘실처럼 어둡고 묵직하게”처럼 말하면 원하는 인상이 선명해져요.

5단계: 화면을 열고 한 번 더 다듬어요

수정이 끝나면 실행도 클로드에게 맡기세요.

지금 프로젝트의 개발 화면을 실행해 줘.
이미 실행 중이라면 그대로 사용하고, 브라우저에서 확인할 주소를 알려 줘.
오류가 나오면 원인을 설명하고 고친 뒤 다시 확인해 줘.

화면 판단은 사람이 직접 해야 해요. 브라우저에서 글이 잘 읽히는지, 버튼이 눈에 띄는지, 휴대전화 크기에서도 누르기 편한지 확인하세요.

마음에 들지 않는 부분은 느낌만 말하지 말고 위치와 문제를 함께 알려 주세요.

메인 화면의 포인트색이 너무 강해서 본문보다 먼저 보여.
버튼과 중요한 알림에만 포인트색을 남기고 나머지는 차분하게 줄여 줘.
기능과 글 내용은 건드리지 말고, 수정한 곳을 목록으로 알려 줘.

마음에 들면 현재 상태를 저장해요.

지금 상태 저장하고 깃허브에 올려 줘.
실행 전에 바뀐 파일과 무엇을 할지 먼저 보여 줘.
비밀번호나 인증 정보가 포함되지 않았는지 확인하고 내 승인을 기다려 줘.

깃허브 로그인이나 권한 승인이 나오면 직접 처리하세요. 이것만 직접 하시면 나머지는 클로드가 해요.

오토프로그 랩스는 이렇게 정했어요

오토프로그 랩스도 먼저 목업(미리보기 시안) 4개를 비교했어요.

나중에는 밝은 BRUTAL LIGHT를 더해 모두 5종이 됐어요. 이 시안은 라이트 모드로 이어졌어요.

HOLOGRID는 영화 ‘블레이드 러너 2049’의 어두운 지휘실을 기준으로 삼았어요. 배경 #0B0D0C, 본문 #A9B0AB, 포인트 #4ADE80을 쓰고 제목은 #E8ECE9로 구분했어요.

한글 본문과 제목에는 Pretendard, 메뉴와 라벨에는 Chakra Petch를 써요. 컴퓨터 화면 느낌이 필요한 곳에는 JetBrains Mono와 Share Tech Mono를 사용해요.

검은 배경과 형광 연두색만 쓰면 흔한 조합에 머물 수 있어요. 그래서 44px 간격의 옅은 격자와 움직임을 더하고, 본문 대비를 8.62:1로 맞췄어요.

처음에는 한글 본문에도 영문용 Share Tech Mono를 썼지만 읽기 어려워 Pretendard로 바꿨어요. 스타일 이름을 고른 뒤에도 글꼴과 읽기 편한 대비를 직접 확인해야 해요.

이 강의, 영상으로도 있어요

프롬프트로 디자인을 바꾸는 과정을 실측 14분 영상으로 볼 수 있어요.

유튜브 채널 「오토프로그」 바로 가기

이런 분께 추천해요

기능은 잘 움직이지만 화면이 정돈되지 않은 분께 알맞아요. 디자인 용어가 낯설다면 표에서 방향을 고르고 프롬프트를 채우면 돼요.

참고 링크

• 오토프로그 랩스 frontend-design 스킬 안내
• Claude Code 공식 문서
• Refactoring UI (디자인 기본기 안내)
• Coolors (무료 색상 팔레트 생성기)

다음 강

19강: 자동화에서는 크론(정해진 시간에 실행하는 방식)과 웹훅(사건이 생기면 실행하는 방식)으로 반복 작업을 맡기는 흐름을 배워요.

19강으로 넘어가기