미학 엔지니어링 · 11 / 12

레퍼런스를 AI에 넣어 주기

어디가 좋은지 볼 수 있게 되면, 다음은 AI도 알게 하는 일이에요. 이 레슨은 레퍼런스를 대화에 넣는 세 가지 자세—레퍼런스 이미지, 스타일 설명, 디자인 변수—와 바로 쓸 프롬프트 템플릿을 다뤄요.

레퍼런스 이미지경험 속성스타일 설명디자인 변수프롬프트 템플릿
먼저 인정: 형용사는 AI에 닿지 않아요

「조금 더 따뜻하게, 조금 더 고급스럽게」—열 번 말하면 아홉은 모델에서 변형돼요. 형용사는 두 번 번역돼요: 당신이 감각을 단어로 압축하고, 모델이 단어를 화면으로 펼치니 양쪽 다 손실이 나요. 레퍼런스를 AI에 바로 넣으면 손실이 가장 적고, 한 번에 자리잡아요.

레퍼런스를 넣는 자세는 세 가지, 각자 한 구간을 맡아요. 표를 보고 고르세요:

넣는 법무엇을맞는 장면약점
레퍼런스 이미지레퍼런스 1~3장전체 분위기, 구도, 스타일 전이레이아웃까지 베끼기 쉬움
스타일 설명스펙 문단: 밀도, 주색, 모서리규칙으로 말할 수 있는 스타일말로 못 하는 분위기는 못 씀
디자인 변수토큰 목록: 주색 / 모서리 / 서체 / 간격AI에게 UI 코드를 시킬 때스타일은 잡아도 레이아웃·카피는 못 잡음
직접 해보기 · 장면 매칭: 요구 셋에 넣는 법 하나씩
AI에게 행사 포스터를 다시 그리게 하고 브랜드 분위기를 지키기 객관식
A레퍼런스 이미지: 이전 포스터를 붙여 분위기를 배우게
B스타일 설명: 「고급스럽고 웅장한」 한 단락
C디자인 변수: CSS 변수 목록 주기
Cursor가 만든 관리 백오피스를 Linear처럼 객관식
A레퍼런스 이미지: Linear 화면을 몇 장 캡처해 주기
B스타일 설명: 「Linear처럼 간결하게」 쓰기
C디자인 변수: 주색·모서리·서체·간격 토큰 목록
AI가 낸 상세 페이지에서 AI 티를 빼되, 원하는 스타일을 말로 못 함 객관식
A레퍼런스만: 좋아하는 상세 페이지 한 장
B레퍼런스 + 스타일 설명: 그림이 분위기, 글이 규칙
C눈에 들어오는 버전이 나올 때까지 반복
스타일 설명엔 바닥이 있어요: 먼저 제품에 형용사 셋

스타일 설명은 처음부터 지어낼 필요 없어요. 방법론이 있어요. About Face 4 17장은 Cooper의 방식을 경험 속성이라 적어요: 설계 전에 고객과 형용사 3~5개를 골라 제품 분위기와 브랜드 약속을 말해요—「깨끗, 절제, 신뢰」처럼. 단어가 정해지면 이후 모든 시각 결정의 심판이 돼요: 안 확실하면 이 단어들이 허락하는지 되묻고요.

형용사끼리 싸워도 돼요. 책은 「안전」과 「유연」이 동시에 있어도 된다고 해요. 그 긴장은 남길 만해요: 두 단어가 부딪히는 곳이 초기 스타일 초안이 먼저 답할 질문이에요.

이 방법을 AI에 넣는 일에 옮기면 딱 맞아요: 먼저 형용사로 분위기를 박고, 각 형용사를 구체 스펙으로 번역. 형용사만 주면 AI는 평균으로 이해하고, 번역까지 끝나야 스타일 설명이 완성돼요. 번역은 아래 작업대에 맡기세요.

직접 해보기 · 경험 속성 작업대
경험 속성 작업대 단어 3개 고르기
손에 든 제품을 떠올리며 단어 은행에서 형용사 3개—스펙 조각이 그 자리에서 생성돼요

          
대결 · 같은 형용사, 두 가지 주는 법

요구: 가계부 앱 홈, 분위기는 「깨끗, 절제, 신뢰」. A는 세 단어를 그대로 AI에 보내고, B는 작업대를 한 번 거쳐 단어마다 스펙으로 번역한 뒤 보내요. 더 낫다고 생각하는 쪽을 누르세요.

가계부 앱 홈 더 나은 쪽을 누르세요
A · 형용사 그대로
qingzhang.app/preview-a
간결한 가계부, 믿을 수 있어요
깨끗 · 절제 · 프로 · 신뢰
시작하기더 알아보기
스마트 분류
보안 암호화
멀티 기기 동기화
B · 스펙으로 번역 후 전송
qingzhang.app/preview-b
10월 지출
¥3,482
지난달보다 ¥217 적고, 식비가 40%
한 건 기록내역 보기
이번 달 예산¥5,000
남은 여유¥1,518
도구 · 프롬프트 템플릿 생성기

넣는 법 세 가지에 각각 준비된 말이 있어요. 법을 고르고, 복사하고, 자리표시만 바꿔 보내세요. 스타일 설명은 작업대 산출을 본문에 그대로 넣으면 돼요.

프롬프트 템플릿 생성기 복사 가능

        
변수 목록이 곧 AI에게 세운 표준

세 번째 넣는 법은 따로 말할 만해요. 레퍼런스를 design token으로 쪼개 주색·모서리·서체·간격을 각 변수로 두면, 넘기는 건 레퍼런스 이상이 아니라 인터페이스 표준이에요.

표준이 왜 값질까요? About Face 4 17장은 닐슨의 장부를 인용해요: 통일된 인터페이스 표준은 사용자가 더 빨리 배우고 덜 틀리게 해요. 한곳에서 쌓인 경험이 다른 곳의 행동을 예견하니까요. 개발팀엔 이미 난 결정이 논쟁을 줄여 줘요. AI에도 같은 장부가 성립해요: 토큰 목록만 주면 매 생성이 같은 표준에 떨어지고, 열 번 고쳐도 드리프트하지 않으며, 검수할 때 대조물이 손에 있어요.

표준의 가치는 예견 가능성: 행동이 예견되면 더 빨리 배우고 덜 틀려요. 닐슨을 정리, About Face 4 17장 전술.

같은 장은 쓴소리도 먼저 해요: 표준을 지키세요. 아주 좋은 다른 선택이 없다면. 깨도 되지만 이유는 단단해야 하고, 이 규칙은 당신과 AI에게 같아요. 마지막으로 대결 한 판으로 이번 레슨의 장부를 그 자리에서 닫아요.

대결 · 같은 요구, 두 입력

요구: 베이커리 스튜디오 브랜드 페이지. A의 입력은 「조금 따뜻하게, 조금 고급스럽게」뿐이고, B는 레퍼런스와 변수 목록을 가져와요. 더 나은 쪽을 누르세요.

베이커리 스튜디오 브랜드 페이지 더 나은 쪽을 누르세요
A · 입으로만 「따뜻, 고급」
tianyu-bakery.cn
오픈 특가
스위트 아일 베이커리에 오신 걸 환영해요
품질 · 장인 · 따뜻 · 고급
바로 구매더 알아보기문의하기
신상품회원 혜택기간 한정 할인
매장에서 10% 쿠폰, ¥88 이상 추가 ¥10
B · 레퍼런스 + 변수 목록
tianyu-bakery.cn
스위트 아일 베이커리
핸드메이드 유럽빵, 하루 마흔 개
돌가마 직화, 소진 시 종료
매장 예약이번 주 메뉴
가동수~일 10:00
시그니처호두 통밀 · 씨솔트 크루아상
주소구시가 창고거리 12
핵심 요점

형용사는 변형되고, 레퍼런스는 안 해요. 그림·스펙 글·변수 목록을 대화에 바로 넣으면 손실이 가장 적어요.

넣는 법 셋이 각각 한 구간: 레퍼런스 이미지는 분위기, 스타일 설명은 규칙, 디자인 변수는 코드. 섞어 써도 되지만 각자 맡은 걸 먼저 가르세요.

스타일 설명엔 방법론이: 형용사 3개로 분위기를 박고(경험 속성), 단어마다 스펙으로 번역. 단어는 심판, 스펙은 실행.

토큰 목록은 AI에게 표준을 세움: 가치는 예견—매 생성이 같은 변수에 떨어지고, 수정해도 드리프트하지 않으며, 검수에 대조가 있어요.

산출이 평범하면 입력부터 보세요. 형용사만 있으면 산출은 평균에 떨어지고, 레퍼런스와 변수로 바꾸면 같은 모델이 바로 얼굴을 바꿉니다.

출처: 샤오산 아카데미 「미학 엔지니어링」 특집 오리지널; 일부 디자인 원칙은 About Face 4 17장(Alan Cooper 등)에서 정리했고, 경험 속성법과 표준화 논의는 같은 장에서.