# AI에게 디자인을 설명하는 법 일하는 사람을 위한 120분 실습형 워크숍이다. 전문 디자인 프로그램 없이 종이, 메모 앱, 브라우저 기반 무료 도구로 진행한다. AI에게 “예쁘게 만들어 줘”라고 맡기는 대신, 목적·정보 구조·레이아웃·타이포그래피·색 대비·접근성·출력 형식을 말하고 결과를 비교·평가·수정하는 연습을 한다. ## 참가자와 준비물 - 권장 인원 30명: 5명씩 6팀. 팀 안에서 브리프 담당, 정보 구조 담당, 프롬프트 기록자, 검토자, 발표자를 정한다. 역할은 중간에 교대한다. - 참가자는 노트북 또는 스마트폰, 브라우저, 종이 3장과 펜을 준비한다. 계정 가입이 필요한 도구는 선택 사항이며, 이미지 생성·문서 작성·화이트보드 중 하나만 쓸 수 있어도 된다. - 진행자는 빔 화면, 타이머, A4 출력물(워크시트와 예시), 굵은 펜, 포스트잇을 준비한다. 도구 장애 때는 AI 결과 대신 손그림 와이어프레임과 사람이 쓴 문구로 끝까지 산출물을 만든다. ## 목표와 실제 산출물 끝나면 각 팀은 다음을 들고 간다. 1. 한 문장 문제 정의, 대상, 채널, 성공 기준이 있는 디자인 브리프 2. 참고 이미지 3개와 각각의 관찰 문장이 있는 레퍼런스 보드(이미지 대신 인쇄물·스크린샷·말로 설명한 사각형도 가능) 3. 색·글자·간격·형태·이미지 사용 규칙을 한 장에 정리한 스타일 타일 4. 고정 문구와 숫자를 포함한 원페이지 안내문 또는 공개 강연 포스터 초안 5. 동료의 점수표, 가장 큰 문제 1개, 다음 수정 1개가 기록된 크리틱 시트 ## 진행 원칙 무드 단어를 나열하지 말고 관찰 가능한 속성을 요청한다. 예를 들어 “세련되고 따뜻하게” 대신 “아이보리 배경, 본문 16px 이상, 제목 32px 굵게, 한 열 그리드, 왼쪽 정렬, 포인트 색은 제목 아래 선에만 사용”처럼 말한다. AI가 만든 글자·날짜·금액은 사실로 간주하지 않는다. 행사명, 날짜, 시간, 장소, 인원, 준비물은 **불변 텍스트**로 프롬프트에 넣고 결과와 대조한다. 이 워크숍의 5초 찾기 활동은 짧은 현장 점검용 휴리스틱이다. 표준 검사나 엄밀한 A/B 테스트로 해석하지 않는다. ## 120분 핵심 일정(휴식 포함, 총 120분) | 시간 | 활동 | 팀의 흔적 | |---:|---|---| | 0–10 (10분) | 도입: 좋은 결과보다 좋은 판단. 6팀 편성, 역할 배정, 도구 로그인 또는 종이 대체 확인 | 팀명·역할 | | 10–25 (15분) | 브리프 작성: 대상·상황·행동·채널·제약·성공 기준을 채움 | 디자인 브리프 | | 25–40 (15분) | 레퍼런스 관찰: 이미지 3개에서 레이아웃·비율·대비·타입·여백을 측정하듯 기록 | 레퍼런스 보드 | | 40–55 (15분) | 프롬프트 해부: 대상/목적/내용/구조/시각 규칙/출력/검수 순서로 재작성 | 개선 프롬프트 | | 55–65 (10분) | 휴식 | — | | 65–85 (20분) | 1차 생성과 1변수 비교: 같은 내용에서 변수 하나만 바꾼 A/B 만들기 | A/B 결과와 변수 기록 | | 85–105 (20분) | 스타일 타일과 원페이지 초안: 글자·색·간격을 고정하고 손으로도 배치 | 스타일 타일·초안 | | 105–115 (10분) | 팀 간 크리틱: 점수표로 조용히 평가 후 근거 한 문장씩 공유 | 크리틱 시트 | | 115–120 (5분) | 수정 약속과 회수: 가장 큰 문제, 다음 변수, 가져갈 파일을 적음 | 수정 계획·산출물 | ## 180분 확장 일정(휴식 포함, 총 180분) | 시간 | 활동 | 팀의 흔적 | |---:|---|---| | 0–10 (10분) | 도입·역할·도구 점검 | 역할표 | | 10–30 (20분) | 브리프와 고정 정보 잠금 | 브리프 | | 30–50 (20분) | 레퍼런스 보드와 접근성 점검 | 관찰 카드 | | 50–65 (15분) | AI 요청 구조와 안전한 사실 확인 미니 강의 | 프롬프트 골격 | | 65–75 (10분) | 휴식 | — | | 75–100 (25분) | 1차 생성·A/B 1변수 비교 | 비교표 | | 100–120 (20분) | 정보 구조와 와이어프레임(종이 포함) | 와이어프레임 | | 120–130 (10분) | 휴식 | — | | 130–150 (20분) | 스타일 타일·원페이지 제작 | 스타일 타일·초안 | | 150–170 (20분) | 2라운드 크리틱과 한 변수 수정 | 수정본·점수표 | | 170–180 (10분) | 발표(팀당 1분)와 개인 회고 | 발표 사진·회고 | ## 실습 과제: 가상의 공개 세미나 아래는 실제 기관이나 실제 예산을 사용하지 않는 허구의 과제다. > 행사명: **AI로 만드는 첫 안내문** > 대상: 안내문 제작을 처음 맡은 폭넓은 직장인 > 고정 문구: `AI로 만드는 첫 안내문` > 고정 정보: `2026년 10월 15일 14:00–16:00`, `가상 배움센터 2층`, `인원: 30명`, `준비물: 노트북, 충전기`, `교육용 가상 행사입니다. 실제 모집이 아닙니다.` > 산출물: 모바일에서 읽을 수 있는 세로 포스터 또는 A4 원페이지 안내문 > 제약: 본문 120자 이내, 색상 3개 이내, 이미지 생성 결과에 글자 삽입 금지(글자는 문서 도구에서 입력), 시각장애 사용자도 핵심 정보를 읽을 수 있게 대비와 대체 설명을 기록. 신청 URL·등록 안내는 만들지 않는다. ### 초보자 기준선과 개선 요청 초보자 기준선: ```text AI로 직장인 대상 행사 안내문을 만들어 줘. 따뜻하고 세련되고 트렌디하게, 사람들이 많이 오고 싶게 만들어 줘. 파란색을 써 줘. ``` 문제는 대상·읽는 순서·크기·고정 정보·출력 형식·검수 방법이 없다는 것이다. 개선 요청은 다음처럼 설계한다. ```text 역할: 직장인이 퇴근 후 읽는 공공 교육 정보를 정리하는 정보디자이너. 목적/대상: 안내문 제작을 처음 맡은 직장인이 5초 안에 행사명·일시·장소·준비물을 찾도록 한다. 고정 텍스트(한 글자·숫자도 변경 금지): “AI로 만드는 첫 안내문” “2026년 10월 15일 14:00–16:00” “가상 배움센터 2층” “인원: 30명” “준비물: 노트북, 충전기” “교육용 가상 행사입니다. 실제 모집이 아닙니다.” 구조: 세로 1장, 위에서 행사명 → 한 문장 설명 → 일시/장소 → 인원/준비물 → 가상 행사 안내 순서. 본문은 120자 이내. 신청 URL이나 등록 문구는 만들지 않는다. 시각 규칙: 화면 예시는 390px 폭, 바깥 여백 24px, 한 열, 제목 32px/굵게, 본문 16px 이상/줄 간격 1.5, 왼쪽 정렬, 배경 아이보리·본문 짙은 남색·강조색 주황색 총 3색 이내. A4 인쇄본은 12pt 본문, 24pt 제목, 바깥 여백 15mm를 별도로 확인한다. 장식보다 정보 대비를 우선한다. 출력: (1) 위계가 보이는 텍스트 와이어프레임 (2) 색·타입·간격 토큰 표 (3) 이미지가 필요하면 이미지 설명과 대체 텍스트만 출력. 이미지 안에는 글자를 넣지 않는다. 검수: 고정 텍스트를 원문과 대조하고, 5초 점검에서 행사명·일시·장소 위치를 표시한다. A안과 B안은 일시·장소 텍스트 크기만 다르게 하고 색·배경·위치·문구는 고정한다. ``` 비교할 때는 “B가 더 예쁜가?” 대신 “일시·장소를 5초 안에 찾은 사람이 몇 명인가?”, “고정 텍스트 오류가 0개인가?”, “본문이 390px에서 잘리는가?”를 묻는다. 5초 점검은 표준이나 엄밀한 실험이 아니다. 분모를 기록하고(예: A 4/5명, B 5/5명), 같은 사람이 두 안을 보면 익숙해지는 효과가 있음을 적는다. 가능하면 보는 순서를 팀마다 바꾸거나, 바꾸지 못하면 결과를 인과 결론이 아닌 다음 수정의 단서로만 사용한다. A/B에서는 일시·장소 텍스트 크기만 바꾸고 글자색·배경·위치·문구는 그대로 둔다. ## 점수 루브릭(1–5점, 팀당 25점) | 항목 | 1점 앵커 | 3점 앵커 | 5점 앵커 | |---|---|---|---| | 목적·대상 | 누구를 위한지/무엇을 하게 할지 없음 | 대상과 행동이 있으나 상황이 모호함 | 대상·상황·행동·성공 기준이 한 문장으로 검증 가능 | | 정보 위계 | 제목·일시·장소가 섞여 찾기 어려움 | 크기·위치 차이로 일부 위계가 보임 | 행사명→일시·장소→준비물 순서가 일관되게 읽힘 | | 시각 규칙 | 무드 단어뿐, 규칙 재현 불가 | 색/글자 일부가 수치화됨 | 색 3개·타입 크기·여백·정렬·이미지 규칙이 재현 가능 | | 정확성·접근성 | 읽기 어려운 대비/작은 글자 | 대비를 확인했으나 대체 설명 또는 크기 기록이 부족 | 본문 16px 이상(화면 예시), A4 12pt, 대비 확인, 대체 설명 포함 | | 학습·수정 | 선택 근거와 다음 실험이 없음 | 피드백 한 가지를 반영함 | 1변수 점검, 분모와 관찰 근거, 다음 수정이 명확함 | 고정 텍스트·숫자 오류는 어느 항목과도 합산하지 않는 **필수 수정 표시**다. 오류가 하나라도 있으면 `must-fix`로 표시하고, 총점이 높아도 배포하지 않는다. 3점은 중간 앵커일 뿐 ‘게시 가능한 상태’를 뜻하지 않는다. 2점과 4점은 양쪽 앵커 사이에서 근거를 적고, 아직 시험하지 않은 항목은 점수 대신 `미검증`으로 둔다. ## 참가자용 출력 워크시트 ### 1. 디자인 브리프 ```text 팀명/역할: ____________________ 날짜: __________ 누가(상황 포함): __________________________________________ 무엇을 하게 할까: _________________________________________ 어디서 읽나(화면/인쇄/거리): ________________________________ 고정 문구·숫자·장소: ______________________________________ 반드시 지킬 제약(개수/크기/색/시간): ________________________ 성공 기준(관찰·측정 가능하게): ______________________________ ``` 예시: “안내문 제작을 처음 맡은 직장인이 5초 안에 10월 15일·가상 배움센터 2층·준비물을 찾는다. 화면 390px, 인쇄 A4, 3색, 본문 120자, 고정 텍스트 변경 0개.” ### 2. 레퍼런스 관찰 카드 ```text 레퍼런스 번호/출처: __________________________ 내가 실제로 본 것(무드 단어 금지): 레이아웃/그리드: _____________________________ 타입(크기·굵기·행간·정렬): ___________________ 색/대비(어디에 어떻게 쓰였나): _________________ 여백/반복/이미지 비율: ________________________ 우리 과제에 옮길 규칙 1개: ____________________ ``` 예시: “제목은 상단 20% 안에 두 줄, 본문과 24px 간격. 짙은 글자를 밝은 면에 두고 주황색은 신청 영역에만 반복.” ### 3. 프롬프트와 1변수 비교 ```text 이번 요청의 목적: __________________________________________ 고정할 것(문구·숫자·크기·내용): _____________________________ 바꿀 변수는 딱 하나: ______________________________________ A 결과에서 관찰한 사실: ___________________________________ B 결과에서 관찰한 사실: ___________________________________ 5초 안에 행사명/일시/장소를 찾은 사람 수(분모 포함): A ___ / B ___ 보는 순서(무작위/고정)와 같은 사람의 재노출 여부: __________________ 고정 텍스트 오류 수: A ___ / B ___ 선택과 근거: ______________________________________________ ``` ### 4. 크리틱·수정 카드 ```text 평가 팀: __________ 제작 팀: __________ 목적 __/5 위계 __/5 규칙 __/5 정확성·접근성 __/5 수정 __/5 고정 텍스트 오류: ___개 (must-fix) 가장 먼저 보인 정보: ______________________________________ 막힌 지점(한 가지): _______________________________________ 근거가 되는 화면/문장: ____________________________________ 다음 라운드에 바꿀 변수 하나: ______________________________ 바꾸지 않을 것: ___________________________________________ ``` ## 참고한 공개 교육 자료 다음 자료의 개념을 요약·재구성해 이 워크숍의 브리프, 위계, 타이포그래피, 대비, 크리틱 활동에 반영했다. 사례와 문구는 새로 작성했다. - [Interaction Design Foundation, What are Design Briefs?](https://www.interaction-design.org/literature/topics/design-briefs): 목표·대상·제약·산출물을 브리프에 명시하는 구조를 참고했다. - [Adobe Education, Design Principles Activity](https://cdn.edex.adobe.com/v3/uploads/resourceFile/2014/82303c61-6102-11e2-9a53-12313b016471.6b675a5c-c111-471a-8395-5b62a0e37d04.pdf): 디자인 원리, 타이포그래피, 색과 크리틱을 한 활동에서 연결하는 방식을 참고했다. - [Adobe Learn, Guiding readers through information](https://www.adobe.com/learn/illustrator/paths/graphic-design-foundational-skills/illustrator/series/typography/illustrator/in-app/guiding-readers-through-information): 글자 위계가 독자의 읽기 순서를 만든다는 설명을 반영했다. - [Google Design, Reviewing the Design Review](https://design.google/library/reviewing-the-design-review): 정보 위계와 근거 중심 리뷰 질문을 참고했다.