AI는 다양한 분야에서 인간의 능력에 근접했지만, 디자인은 오랫동안 AI가 어려움을 겪는 영역 중 하나였습니다. 하지만 많은 사람들이 'AI로 디자인한다'는 것의 의미를 약간 오해하고 있다고 생각합니다.
이 글에서는 Leon Lin(@LexnLin)의 게시물 "How To Actually Design With AI"를 바탕으로, AI를 활용한 디자인 실전 방법을 일본어로 정리했습니다.
글 마지막 부분에서는 Claude로 고품질 디자인을 만들기 위한 디자인 시스템 키트를 배포하고 있습니다.
글 하단에서 받으실 수 있습니다.
명심해야 할 전제 조건
'AI로 디자인한다'는 것은 모든 것을 AI에 맡긴다는 뜻이 아닙니다. 아이디어, 방향성, 직감, 창의성은 궁극적으로 당신에게서 나옵니다. AI는 그런 것들을 '구체화(실행)하는' 도구라고 생각하면 이해하기 쉽습니다.
일반적인 흐름은 다음 3 단계로 구성됩니다:
- 스스로 아이디어를 발전시킨다
- 영감을 수집한다
- 생각을 프롬프트로 변환하여 AI가 만들게 한다
Cursor, Codex, Claude 등 어떤 도구나 환경(하네스)을 사용해도 좋습니다. 핵심은 '생각을 지시로 변환하는 것'에 있습니다.
AI는 실행에 매우 능숙하지만, 아직 진정한 창의성은 갖추지 못했습니다. 여백, 타이포그래피, 색채 이론, 위계와 같은 '디자인 규칙'은 이해합니다. 하지만 무엇이 '진정으로 좋은지', '독창적인지', '의미 있는지'를 이해하지는 못합니다. 즉, 취향(taste) 말입니다.
이것이 가장 큰 차이점입니다. 현재로서는 AI에게 진정한 취향을 줄 수는 없지만, 취향이 존재한다고 가정함으로써 그 한계를 극복할 수 있습니다.
방법 1: 디자인 스킬 사용하기
이것은 가장 빠른 접근 방식입니다. 시간이 없거나 작은 것을 만들 때는 미리 준비된 '디자인 스킬'에 의존하는 것이 효과적입니다.
예를 들면 다음과 같습니다:
- Impeccable (impeccable.style
- Emil Kowalski의 UI 스킬 (GitHub: emilkowalski/skills)
- Skills.sh
- TasteSkill (tasteskill.dev
과정은 매우 간단합니다:
- 디자인 스킬을 추가한다
- AI에 맥락을 제공한다
- 몇 개의 프롬프트를 보내 사이트, 앱 또는 포스터를 만들게 한다
- 명백한 문제를 수정한다
- 게시한다
결과는 대개 '꽤 괜찮은' 수준입니다. 다른 AI 생성 디자인과 비슷해 보일 수 있지만, 고품질 스킬을 사용하면 최악의 실패와 'AI스러운' 느낌을 피할 수 있습니다. 많은 사람들이 실제로 사용하는 방법입니다.
방법 2: AI와 함께 직접 디자인하기
'진정으로 돋보이는' 무언가를 만들고 싶다면 한 걸음 더 나아가야 합니다. 사용자가 제품을 만질 때 '잘 생각된 제품이다'라고 느끼게 하려면, 더 의도적인 과정이 필요합니다.
모바일 앱, 데스크탑 앱, 웹사이트, 랜딩 페이지, 대시보드, 포스터 등 무엇이든, 먼저 명확한 방향성이 필요합니다. 무엇을 만들고 싶은지 모른다면, AI도 그것을 찾아주지 못합니다.
'의미'에서 시작하라
무엇보다 먼저 기초를 정의하세요. 다음 질문에 답해보세요:
- 이것은 누구를 위한 것인가?
- 어떤 문제를 해결하는가?
- 어떤 느낌을 주어야 하는가?
- 무엇을 구현하는가?
UI는 제품의 '의미'를 반영합니다. 이것들을 적어보세요. 여기서 AI를 사용할 수도 있지만, 요령은 디자인을 위해 사용하기보다는 스스로에게 질문을 던지도록 사용하는 것입니다.
예를 들어, AI에게 다음과 같이 질문하게 하세요:
- 이 제품은 무엇에 관한 것인가?
- 의도한 사용자는 누구인가?
- 전달하고 싶은 감정은 무엇인가?
- 브랜드 분위기는 어때야 하는가?
- 어떤 색상과 폰트가 어울리는가?
- 미니멀 / 플레이풀 / 프리미엄 / 테크니컬 / 실험적 — 어떤 방향인가?
영감 수집하기
방향이 정해지면 참고 자료를 수집하기 시작하세요. 강력한 소스 중 하나는 Mobbin으로, 다양한 카테고리의 실제 제품 화면을 볼 수 있습니다.
여기서 중요한 것은 그냥 보고 '멋지다'고 생각하는 것이 아닙니다. 왜 좋은지 스스로에게 물어보세요.
- 레이아웃 때문인가?
- 여백 때문인가?
- 타이포그래피 때문인가?
- 구조 때문인가?
- 인터랙션 때문인가?
마음에 드는 것을 저장하고 다음과 같은 폴더로 정리하세요:
- Navigation
- Hero
- Pricing
- Cards
- Mobile screens
- Dashboard
- Animation
- Typography
이렇게 시간을 내어 자신만의 참고 자료 라이브러리를 키우는 것이 '취향'을 기르는 방법입니다.
기타 유용한 소스로는 Pinterest, Cosmos, Awwwards, Webflow Templates, Craftwork, Rebrand Gallery, Component Gallery, Savee, Lummi 등이 있습니다.
참고: 디자인을 통째로 복사하는 것은 피하세요. 여러 아이디어를 결합하여 제품에 맞게 발전시키는 것이 중요합니다.
구조 매핑하기
다음으로, 실제로 무엇을 구축해야 하는지 정의합니다. 웹사이트의 경우 네비게이션, 히어로, 기능, 가격, 사용후기, CTA, 푸터 등이 될 수 있습니다.
앱의 경우 온보딩, 홈, 검색, 프로필, 설정, 핵심 플로우, 빈 상태 등이 될 수 있습니다.
각 섹션에는 명확한 콘텐츠가 필요합니다. 히어로 섹션에는 헤드라인, 설명, CTA, 비주얼이 필요합니다. AI가 카피를 도울 수 있지만, '명확함'은 궁극적으로 당신에게서 나옵니다.
컴포넌트별로 구축하기
마지막으로, 실제 제작 단계입니다. 참고한 개별 아이디어를 가져와 제품에 맞게 재구축하세요.
'전체 웹사이트를 만들어 줘'라고 말하는 대신, '이 스타일을 바탕으로 내 브랜드에 맞는 히어로 섹션을 만들어 줘'라고 말하는 것이 핵심입니다.
Navigation → Hero → Cards → Buttons → Typography → Details 순서로 단계별로 진행하세요. AI는 작은 작업에 훨씬 능숙하며, 이렇게 하면 통제력을 유지할 수 있습니다.
커스텀 에셋 생성하기
필요에 따라 이미지 생성을 사용하세요. 이미지 생성 도구는 이제 충분히 강력해졌습니다. 요령은 색상, 스타일, 구성, 목적과 같은 맥락을 명확하게 전달하는 것입니다.
일반적인 스톡 이미지는 피하세요. 커스텀 비주얼을 사용하면 전체적으로 통일감이 생깁니다.
전체 워크플로
요약하면 흐름은 다음과 같습니다:
- 아이디어를 정의한다
- 목적과 사용자를 명확히 한다
- 브랜드 방향을 결정한다
- 참고 자료를 수집한다
- 정리한다
- 구조를 매핑한다
- 컴포넌트를 만든다
- 에셋을 생성한다
- 인터랙션을 추가한다
- 전체를 다듬는다
단일 프롬프트로 만드는 것보다 훨씬 좋은 결과를 얻을 수 있습니다.
방법 3: 영감 보드 사용하기
약간 더 빠른 '중간 지점'도 있습니다. 모든 것을 하나씩 조립하는 대신, AI에 큐레이션된 참고 자료 세트를 제공합니다.
Mobbin, Awwwards, Webflow 등에서 스크린샷을 수집하고 다음과 같이 요청하세요:
이 참고 자료들의 스타일과 방향을 결합하여 내 제품을 위한 디자인을 만들어 주세요. 단, 정확히 복사하지는 마세요.
물론, 충분한 맥락을 제공하고 AI가 먼저 질문하도록 하는 것이 전제됩니다. 수동 작업보다 빠르면서도, 일반적인 원샷 프롬프트보다 훨씬 나은 결과를 얻을 수 있습니다.
3 가지 접근 방식 요약
- 방법 1: 디자인 스킬 — 빠르고, 괜찮은 결과
- 방법 2: 컴포넌트 기반 — 느리지만, 최고 품질
- 방법 3: 영감 보드 — 균형 잡힌 방식
기타 유용한 도구
- SVG 생성: Quiver와 같은 도구로 SVG를 만들 수 있습니다. 요소가 분리되어 있어 애니메이션 적용이 더 쉽습니다.
- 비디오: Google Flow와 같은 도구. 히어로, 배경, 제품 데모를 향상시킬 수 있습니다.
- 이미지 라이브러리: Lummi와 같은 플랫폼. 하지만 브랜드에 맞는 이미지를 선택하세요.
- 레이어링: 배경 제거 및 레이어링으로 깊이, 움직임, 인터랙션을 추가하세요. 디테일의 축적이 큰 차이를 만듭니다.
결론
AI는 당신의 생각을 대체하지 않습니다.
- 무엇을 만들 것인가
- 왜 중요한가
- 누구를 위한 것인가
- 어떤 느낌을 주어야 하는가
이것들을 결정하는 것은 항상 당신입니다. AI는 단지 더 빠르게 실행할 뿐입니다. 최고의 결과는 더 나은 프롬프트가 아니라 더 나은 취향에서 나옵니다.
이 글은 Leon Lin([@LexnLin](https://x.com/@LexnLin))의 X 게시물 "How To Actually Design With AI"를 바탕으로 일본어로 재구성한 것입니다.
LINE에서 'Claude Design System Kit'를 무료로 배포하고 있습니다.
▼ LINE에 등록하고 'Claude Design System Kit' 받기
https://t.co/90omRA4UQ7
LINE 오픈챗에 가입하신 후, 메모에 있는 공식 LINE에서 다음을 보내주세요:
Design System
그러면 혜택을 받으실 수 있습니다.
※ 오픈챗 내에서 키워드를 보내는 것은 삼가해 주세요.
템플릿을 Claude Design에 그대로 넣고 문서 하나만 만들어 보시길 권장합니다. 그것만으로도 디자인 시스템 사용법을 느낄 수 있을 것입니다.
▼ LINE에 등록하고 'Claude Design System Kit' 받기
