맥락을 더하기 — 이미지·레퍼런스·코드

1. 왜 맥락이 중요한가

앞 장에서는 글(프롬프트)만으로 디자인을 만들었습니다. 하지만 디자인은 본질적으로 시각적인 작업입니다. 머릿속 이미지를 글로만 옮기는 데는 한계가 있습니다. "둥글고 부드러운 느낌"이라는 말은 사람마다 다르게 상상합니다.

Claude Design은 글 외에도 이미지·레퍼런스·코드를 함께 받아들입니다. 적절한 맥락(context)을 더하면, Claude는 여러분의 의도를 훨씬 정확하게 짚어냅니다. 이번 장에서는 이 세 가지 맥락을 다루는 법을 배웁니다.

2. 이미지로 보여주기

말로 설명하기 어려운 것은 보여주면 됩니다. Claude Design에는 다음과 같은 이미지를 올릴 수 있습니다.

레퍼런스 스크린샷: "이런 느낌으로 만들어줘"라고 참고할 화면
경쟁사·벤치마킹 화면: 비슷한 서비스의 디자인
손으로 그린 스케치(와이어프레임): 종이에 대충 그린 레이아웃도 좋습니다
로고·브랜드 이미지: 우리 정체성을 보여주는 자료

예를 들어, 냅킨에 그린 화면 구상을 사진으로 찍어 올리고 이렇게 말할 수 있습니다.

첨부한 손 그림은 내가 구상한 대시보드 레이아웃이야.
이 구조를 살려서, 깔끔하고 전문적인 느낌의 실제 화면으로 만들어줘.
왼쪽 사이드바, 상단 요약 카드 4개, 가운데 큰 차트 영역.

Claude는 그림의 레이아웃 구조를 읽어내, 거기에 실제 디자인을 입혀줍니다. 손 그림이 멋질 필요는 전혀 없습니다. 네모와 선만으로도 충분합니다.

레퍼런스를 쓸 때의 태도. 다른 서비스의 화면을 참고하는 것은 좋지만, "이걸 똑같이 베껴줘"라고 하는 것은 권하지 않습니다. 레퍼런스는 방향을 가리키는 나침반입니다. "이 화면의 여백이 시원해서 좋아, 이런 호흡으로"처럼 어떤 점이 좋은지를 짚어주면, 베끼지 않으면서도 장점만 가져올 수 있습니다.

3. 문서를 디자인으로 바꾸기

이미 내용이 정리된 문서가 있다면, 그것을 디자인의 출발점으로 삼을 수 있습니다. Claude Design은 다음과 같은 파일을 받아 시각 작업물로 재구성합니다.

가진 것	만들 수 있는 것
발표 내용을 적은 문서(DOCX)	슬라이드 덱
거친 초안 슬라이드(PPTX)	다듬어진 프레젠테이션
표·수치가 담긴 데이터(XLSX)	시각화된 대시보드·차트

첨부한 워드 문서는 우리 서비스 소개 내용이야.
이걸 11장 내외의 투자 설명(IR) 슬라이드로 만들어줘.
표지, 문제 정의, 솔루션, 시장 규모, 팀 소개 순서로.

빈 화면에서 시작하는 것보다, 가진 자료를 던져주고 재구성을 맡기는 편이 훨씬 빠를 때가 많습니다.

4. 코드 저장소 연결하기

이 기능은 특히 이미 서비스를 운영 중인 팀에게 강력합니다. Claude Design에 회사의 코드 저장소(repository) 를 연결하면, Claude가 기존 컴포넌트와 스타일 패턴을 학습합니다.

그 결과,

새로 만드는 화면이 기존 서비스와 같은 디자인 언어를 갖습니다.
이미 있는 버튼·카드·폼 스타일을 재사용합니다.
색상·간격·폰트가 기존 코드와 어긋나지 않습니다.

코드를 몰라도 괜찮습니다. 연결은 한 번만 해두면 되고, 이후로는 Claude가 알아서 그 규칙을 따릅니다. (저장소 연결을 포함한 브랜드 시스템은 5장에서 본격적으로 다룹니다.)

⚠️ 리서치 프리뷰 단계에서는 아주 큰 코드베이스를 연결하면 성능이 느려지거나 오류가 날 수 있습니다. 처음에는 핵심 컴포넌트가 담긴 작은 저장소부터 연결해 보세요.

5. 맥락은 '많이'가 아니라 '정확히'

맥락을 더할 때 흔한 오해가 있습니다. "자료를 많이 줄수록 좋다"는 생각입니다. 실제로는 그렇지 않습니다.

❌ 관련 없는 이미지 10장을 한꺼번에 올리기 → Claude가 무엇을 참고해야 할지 혼란스러워합니다.
✅ 의도에 딱 맞는 레퍼런스 2~3장 + 명확한 설명 → 방향이 또렷해집니다.

맥락은 양보다 적합성입니다. 올리는 자료마다 "이건 ~를 참고하라고 주는 거야"라고 역할을 말해주면 더욱 좋습니다.

✅ 좋은 예:
- 첫 번째 이미지: 전체 색감의 레퍼런스 (이 톤으로)
- 두 번째 이미지: 카드 레이아웃 참고 (이 간격감으로)
- 텍스트: 만들 화면의 목적과 구성

6. 직접 해보기

종이에 만들고 싶은 화면을 손으로 대충 그려 사진을 찍습니다. (네모와 선이면 충분합니다.)
그 사진을 Claude Design에 올리고, 구조를 살려 실제 디자인으로 만들어 달라고 요청합니다.
마음에 드는 다른 서비스 화면을 레퍼런스로 2장 추가하고, "이 화면의 어떤 점"을 참고하라고 콕 집어 말해봅니다.
결과가 손 그림의 의도를 얼마나 잘 살렸는지 확인하고, 차이 나는 부분을 대화로 수정합니다.

7. 정리하며

디자인은 시각 작업이므로, 글에 이미지·레퍼런스·코드를 더하면 의도가 정확해진다.
손 그림 한 장, 레퍼런스 한 장이 긴 설명보다 강력할 때가 많다.
문서(DOCX·PPTX·XLSX)는 디자인의 출발점으로 재구성할 수 있다.
코드 저장소를 연결하면 기존 서비스와 일관된 디자인을 만든다.
맥락은 양보다 적합성 — 자료마다 역할을 말해주자.

다음 장에서는 만든 디자인을 다루는 캔버스 조작과 버전 관리를 살펴봅니다.