미학 엔지니어링 · 7 / 12

「예쁜」걸 말하는 백 가지 구체적 표현

AI에게 「좀 더 예쁘게」라고 하면 추측만 할 수 있어요. 「정보 밀도를 한 단계 올리고, 시각적 노이즈를 낮춰」라고 하면 어디를 손댈지 바로 알아요. 이번 레슨에서는 바로 쓸 수 있는 미학 단어 열두 개, 모든 시각 차이를 분해하는 여덟 변수, 그리고 불만을 용어로 바꾸는 번역기까지 드려요.

미학 어휘여덟 변수좋은/나쁜 예불만 번역복사용 치트시트
이름을 못 말하면, 고칠 곳도 못 맞춰요

「좀 더 예쁘게」를 넘기면 AI는 추측만 해요. 그라데이션을 넣을까, 글꼴을 바꿀까, 모션을 쌓을까. 「정보 밀도를 한 단계 올리고, 시각적 노이즈를 낮춰」를 넘기면 AI는 바로 알아요. 데이터 두 줄 더 넣고, 배지를 절반 깎아요. 어휘는 판단력의 그릇이에요. 「시각적 노이즈」라는 말을 담을 수 있어야 「이 화면 어디가 이상한지」라는 직감도 남을 수 있어요.

미학 어휘량이, AI에게 시킬 수 있는 상한을 정해요.
직접 해보기 · 여덟 단어, 한 장씩 펼치기
미학 어휘 카드 덱 0 / 12
카드를 눌러 뜻과 좋은/나쁜 예를 열고, 다시 누르면 접혀요. 열두 장을 다 열면 정리가 나와요.
직접 해보기 · 여덟 변수, 피팅룸 하나

위의 단어는 「어떻게 평할지」, 아래 변수는 「어떻게 고칠지」를 다뤄요. Bertin은 《그래픽 기호학》에서 시각 부호를 여덟 변수로 쪼갰고, About Face 4도 이 목록을 이어받아요: 형태, 크기, 명도, 색상, 채도, 방향, 텍스처, 위치. 화면에서 「달라 보이는」 건 결국 이 여덟 노브로 내려가요. 같은 색 타일 한 줄 — 어느 변수를 돌리느냐에 따라 이야기가 달라져요.

여덟 변수 피팅룸 0 / 8
변수를 하나 골라, 똑같은 타일 한 줄을 어떻게 가르는지 보세요. 여덟 개를 다 해보면 정리가 나와요.
지금 다섯 요소가 똑같아요. 뭐가 중요한지, 누가 한 무리인지, 뭘 누를 수 있는지 안 보여요. 변수를 하나 골라 손대 보세요.
연습 · 위험은 줄을 서야 해요
시나리오: 위험 다섯 단계를 어떻게 그릴까 객관식

대시보드에 위험 다섯 단계를 보여주고, 낮음→높음을 한눈에 줄 세워야 해요. 어느 변수를 돌릴까요?

A다섯 색상 — 녹·황·주·적·자 각 한 단계
B같은 색상, 명도를 옅은 데서 짙은 데로 다섯 단계
C다섯 형태 — 원·사각·삼각 등이 각 단계
D고위험 단계에만 텍스처를 얹기
시각은 범주, 글은 정체성

About Face 4에는 압창 원칙이 있어요. 「무엇인지」는 시각 속성으로, 「어느 것인지」는 글로. 아이콘은 「이건 문서」까지가 끝이고, 어느 게 계약인지는 파일 이름이 이어받아야 해요. 둘은 각자 일을 하고, 서로를 대신할 수 없어요.

시각이 어디서 멈추나 두 단 전환
전환해 보세요. 시각이 어디서 멈추고, 글이 어디서 받는지.
아이콘 셋이 「다 문서」라고 말하고 나면 더 할 말이 없어요. 계약을 찾으려면 하나씩 열어야 해요.
직접 해보기 · 불만을 변수로 번역하기

고객과 보스는 용어를 못 말해도, 불만마다 가리키는 곳이 있어요. 불만 뒤의 변수를 들으면 고칠 방향이 생겨요. 가장 자주 듣는 네 문장부터 연습해요.

불만 번역기 0 / 4
왼쪽 불만 한 줄을 누른 뒤, 오른쪽에서 맞는 용어를 누르세요. 맞으면 잠겨요.
고객의 불만
「너무 난잡해」
「싸구려로 보여」
「포인트가 안 돋보여」
「너무 답답해」
용어로 번역
위계 부재
시각적 노이즈가 너무 높음
여백 부족
배색 예산 초과
이 치트시트를 가져가세요

여덟 단어를 AI용 문장으로 정리했어요. 각 문장을 프롬프트에 바로 붙여 넣을 수 있어요. 복사해 두고, 다음에 화면을 고칠 때 골라 쓰세요.

AI용 미학 어휘 치트시트 복사 가능
AI용 미학 어휘 치트시트 (「좀 더 예쁘게」 대신) 정보 밀도: 이 화면 정보 밀도가 낮아요. 같은 화면에 핵심 데이터 두 줄을 더 넣으세요. 시각적 노이즈: 배지와 구분선이 너무 많아요. 시각적 노이즈 초과 — 장식을 절반 깎으세요. 숨 쉴 여유: 블록 사이 간격을 키워 숨 쉴 여유를 두고, 콘텐츠가 가장자리에 붙지 않게 하세요. 시각적 위계: 제목과 본문의 크기·굵기를 벌리고, 한 화면에 주인공은 하나만. 시각적 무게: 주 버튼은 솔리드로 두고, 나머지는 아웃라인으로 낮춰 시각적 무게를 줄이세요. 근접성: 라벨을 자기 입력란에 붙이고, 그룹끼리는 멀게 — 거리로 그룹을 말하세요. 대비: 본문과 배경의 대비가 부족해요. 회색 글자를 읽을 수 있는 수준까지 짙게. 베이스라인 정렬: 모든 요소의 왼쪽 가장자리를 같은 베이스라인에 맞추고, 줄마다 제각각 시작하지 마세요. HSV: 색을 노브별로 말하세요. 색상·채도·명도, 한 번에 하나만. 순서형 변수: 낮음에서 높음을 말하려면 명도나 크기를 돌리고, 색상을 바꾸지 마세요. 어포던스: 누를 수 있는 건 누를 수 있게 보이게, 순수 전시는 버튼 기운을 띠지 마세요. 찡그린 눈 테스트: 제출 전에 한 번 찡그려 보고, 주인공이 안 튀면 다시 돌려보내세요.
한 문제 더 풀고 가요
시나리오: 고급감이 없어 객관식

보스가 당신 화면을 들고 「고급감이 없어」라고 해요. 이번 레슨 생각으로, 먼저 뭘 점검할까요?

A비싼 글꼴로 바꾸기
B화면에 색이 몇 가지, 모서리가 몇 세트인지 세기
C모션 추가
D그림자를 더 짙게
핵심 요점
✓

「예쁘다」는 소원이고, 용어는 명령이에요: 「정보 밀도」「시각적 노이즈」를 말할 수 있어야 AI가 어디를 고칠지 알아요.

✓

불만은 모두 변수로 옮길 수 있어요: 「너무 난잡」은 시각적 노이즈 초과, 「싸구려로 보임」은 배색 예산 초과 — 번역해야 제대로 고쳐요.

✓

여덟 변수는 역할이 달라요: 위계·수량은 순서형 변수(크기·명도), 분류일 때만 색상, 형태는 「무엇인지」, 텍스처는 「누를 수 있는지」.

✓

다음에 AI에게 화면을 고치라고 할 때, 치트시트에서 단어 하나를 프롬프트에 넣고 「좀 더 예쁘게」 결과와 한 번 비교해 보세요. 차이를 느껴 보세요.

내용 출처: 샤오산 아카데미 「미학 엔지니어링」 시리즈 오리지널; 일부 디자인 원칙은 《About Face 4: 인터랙션 디자인의 정수》 17장에서 정리.