미학 엔지니어링 · 12 / 12

검수 체크리스트: 승인하기 전에 한 번 더

AI 시안이 갈수록 빨라지니, 게이트키핑도 따라가야 해요. 마무리 레슨에서 검수 항목 15개를 건네고, 오프닝에서 던진 그 한 표를 다시 보며, 이 장이 눈을 길러 줬는지 확인해요.

검수 체크리스트재투표전 장 복습더 읽을거리
3분 검수, 어떻게 계산해도 이득

AI가 10분이면 시안 한 판을 내고, 당신이 3분 검수하면 이 계산은 어떻게 해도 이득이에요. 까다로운 적은 「이 정도면 됐다」예요. 첫눈에 괜찮아 보이면 손이 통과를 누르고 싶어지고, 거친 곳은 출시 뒤에야 눈에 콕 박혀요. 이 리스트가 그 손을 붙잡아요. 열다섯 항목, 항목마다 동작 하나. 한 바퀴 돌리고 나서 승인하세요. 체크 진행은 로컬에 남고, 다음엔 새 시안을 들고 이어서 쓰면 돼요. 리스트의 몇몇 판정 기준은 출처가 있어요. 체크를 마친 뒤 아래로 넘기면, 항목마다 설명과 연습 문제가 붙어 있어요.

직접 해보기 · 검수 체크리스트: 15개 한 바퀴
시안 검수 체크리스트 0 / 15
위계 · 3항목
간격 · 3항목
절제 · 4항목
일관성 · 2항목
디테일 · 3항목
이 브라우저는 로컬 저장을 막아 두었습니다(프라이빗 모드일 수 있어요). 체크는 그대로 되지만, 새로고침 뒤 진행은 남지 않습니다.
절제 그룹의 새 판정: 존재하려면 이유가 있어야 해요

절제 그룹에 새로 넣은 항목은 출처가 있어요. About Face 4 17장의 판정이에요. 모든 요소의 존재에는 이유가 있어야 하고, 모든 차이의 존재에도 이유가 있어야 해요. 이유를 대지 못하면 요소를 지우고 차이를 평평하게 만들어요. 짝이 되는 기법은 삭제 테스트예요. 의심스러운 요소를 빼고 정보가 다쳤는지 봐요. 책은 더 매섭게 말해요. 디자인이 깨질 때까지 줄이다 나간 뒤, 마지막으로 뺀 것을 다시 올려요. 연습 문제 하나 풀어 보세요.

AI가 넘긴 랜딩 페이지, 제목 아래에 그라데이션 장식 선이 깔려 있어요. 어떻게 할까요? 객관식
A남겨 두세요. 지우면 휑해 보여요
B먼저 지워 보고, 정보와 위계가 다치지 않았으면 다시 넣지 마세요
C더 가는 그라데이션 선으로 바꿔요
DAI에게 두 줄을 더 넣어 호응하게 해요
빠르고 느림엔 문턱 셋, 스톱워치가 말해 줘요

디테일 그룹의 응답 시간 판정도 출처가 있어요. 화면이 편한지는 응답 속도가 큰 몫을 차지하고, 문턱은 공인돼 있어요. About Face 4 17장이 닐슨의 구분을 인용해요. 0.1초 안이면 즉각적으로 느껴지고, 1초 안에 끝나면 생각이 끊기지 않아 미세한 단서면 충분하며, 10초에 가까우면 돌아가는 중이라는 신호(예: 스피너와 예상 시간)가 필요하고, 10초를 넘기면 어디가 느린지 설명하고 진행을 갱신하며 끝나면 한 번 알려야 해요. 버튼 세 개가 문턱을 하나씩 밟아요. 직접 눌러 체감을 찾아 보세요.

응답 시간 체험기 지연 3단계
빠른 것부터 느린 것까지 눌러 보며, 문턱이 어디인지 느껴 보세요
설정 하나 저장 같은 가벼운 동작은 이 단에 떨어져야 해요.
폼 제출, 뷰 전환은 대개 이 단에 떨어져요.
리포트 내보내기, 이미지 생성 같은 무거운 일이에요. 누르면 진짜 10초를 기다리고, 진행 바가 함께해요.
숫자 없는 차트는 반려해요

데이터 시각화도 검수 범위예요. Tufte의 원칙: 수치화할 수 있는 데이터는 수치화하라. 차트가 추세를 그리면, 숫자 자체도 자리에 있어야 해요. About Face 4 17장은 Windows 디스크 속성 예를 들어요. 파이 차트가 대략 감을 주고, 사용·가용 바이트 수는 그대로 적어 둬요. AI가 만든 리포트 페이지가 특히 이 실수를 좋아해요. 곡선은 예쁜데 가까이 보면 숫자가 하나도 없고, 보고할 때 다시 원본을 뒤져야 해요. 주간 카드 두 장 중 더 나은 쪽을 눌러 보세요.

이번 주 활성 주간 카드 더 나은 버전을 고르세요
A · 추세만
dash.weekly.cn
이번 주 활성
8월 3일–8월 9일
B · 추세 + 숫자
dash.weekly.cn
이번 주 활성
8월 3일–8월 9일
4,286전주 대비 +12%
412
526
488
654
590
802
814
다시 보기 · 오프닝 그 문제, 한 번 더

오프닝에서 직감으로 세 안 중 한 표를 던졌어요. 12레슨을 마친 뒤, 같은 문제, 같은 세 안의 축소판으로 한 번 더 투표해요.

당신의 두 번째 표 전 장 다시 보기
안을 하나 눌러 투표하세요
smart-platform.ai
올뉴 스마트 플랫폼
미래를 가능하게 · 무한한 가능성
바로 체험무료 가입더 알아보기
A · AI 기본 티
shiplist.app
Shiplist
이번 주 출고할 것, 한 화면에
작업 진행을 자동 모아 배포 체크리스트를 만들어요
무료로 시작데모 보기
B · 절제된 프로
tejia-mall.com
기간 한정 특가 50%부터02:14:36
신규 패키지 · 초대 캐시백 · 매일 출석
인기 특가
오늘 신상
회원 전용
포인트 몰
지금 잡기혜택 받기
C · 떠들썩한 템플릿
복습 · 12레슨을 세 문장으로
아름다움 알아보기

오프닝에서 먼저 직감으로 한 표를. 2~5레슨이 「예쁨」을 네 손잡이로 쪼개요. 위계, 간격, 색, 디테일. 페이지를 보면 먼저 유일한 주인공을 찾고, 간격을 재고, 색을 센 뒤, 마지막으로 디테일을 파요.

AI에게 번역하기

6~9레슨은 눈에 보인 변수를 대화에 적어요. 「좀 더 고급스럽게」를 메인 색, 모서리, 밀도처럼 실행 가능한 말로 바꾸고, 수정할 때 변수를 지목해야 AI가 어디를 고칠지 알아요.

레퍼런스와 검수

10레슨은 레퍼런스를 정해진 순서로 뜯어보고, 11레슨은 레퍼런스를 레퍼런스 이미지·설명·변수 세 가지 자세로 먹여요. 이 페이지의 15항목 리스트가 출구를 지켜요. 승인하기 전에 한 번 더.

더 읽을거리 · 이 장을 따라 밖으로
Refactoring UI(Adam Wathan & Steve Schoger)
디자인 규칙을 개발자가 따라 할 수 있는 동작으로 적어 둔 책이에요. 이 장의 판정 기준 상당수가 여기서 출처를 찾을 수 있어요. 수정 전후 대비 그림을 중점적으로 읽으세요.
The Non-Designer’s Design Book (Robin Williams)
근접성, 정렬, 반복, 대비 네 원칙. 입문 프레임은 이 한 권이면 돼요. 사례 수정 부분을 읽으세요.
About Face 4 17장 (Alan Cooper 등)
이 페이지 리스트의 여러 판정이 이 장에서 나왔어요. 가늘게 보기 테스트, 위계 두 질문, 응답 시간 문턱, 「모든 요소의 존재에는 이유가 있어야 한다」. 17장 「Integrating Visual Design」만 읽어도 본전이에요.
원칙
「적게, 그러나 더 좋게」의 원출처예요. 열 가지를 손안의 페이지에 대조해 어느 조항을 어겼는지 보세요.
심리 법칙을 카드로 만든 사이트예요. 먼저 Hick's Law와 Aesthetic-Usability Effect 두 장을 읽으세요.
가이드
Layout과 Typography 두 장을 읽어, 큰 회사가 간격과 글자 크기 단계를 어떻게 정하는지 보세요.
Color roles 절을 읽으세요. 메인 색 하나가 어떻게 전체 시스템을 파생하는지, 디자인 변수의 산업 버전이에요.
실천
읽기 자료로 보세요. 한 화면에 주인공은 하나, 여백을 구조로 쓰는 방식. 10레슨의 네 단계로 현장에서 뜯어보세요.
정보 밀도는 높은데도 절제를 지키는 모범이에요. 위계 배치와 그레이스케일 분업을 보세요.
핵심 요점

볼 수 있어요: 위계, 간격, 색, 디테일 네 손잡이를 순서대로 뜯어요. 관광객식 구경은 이제 그만.

말할 수 있어요: 느낌을 변수와 레퍼런스로 번역해 AI에게 먹이고, 형용사는 SNS 카피에 남겨 두세요.

검수할 수 있어요: 15항목 리스트가 출구를 지켜요. 다음에 AI가 시안을 넘기면 먼저 리스트를 돌리고, 못 넘긴 항목을 원문 그대로 돌려보내 고치게 하세요.

판정은 출처가 있어야 서요: 존재엔 이유가 필요하고, 응답은 문턱 셋을 넘어야 하며, 수치화할 수 있으면 수치화해요. 출처는 더 읽을거리에 있으니, 누가 물어도 답할 수 있어요.

출처: 샤오산 아카데미 「미학 엔지니어링」 특집 원작. 일부 디자인 원칙은 About Face 4 17장(Alan Cooper 등)에서 정리했고, 응답 시간 문턱은 그 장이 닐슨을 전재한 것이며, 수치화 원칙은 Tufte에서 왔어요.