📑 디자인 모듈(design-sense) 사용법 — 6개 탭 둘러보기

다른 도구와 똑같이, 세션으로 시작한다

디자인 모듈도 티처메이트의 다른 도구와 사용법이 같다. 강사는 대시보드 '내 수업'에서 '수업 만들기'로 수업을 만들고, 학생은 '수업 참여하기'에 강사가 받은 참여 코드와 이름을 입력해 들어온다. 모든 툴이 이 방식이라, 한 번 익히면 어디서나 똑같다.

수업 세션에 들어가면, 6개 탭이 있다

디자인 모듈은 혼자 이론만 배우는 곳이 아니라 만들기 위한 도구다. 오늘은 이 6개 탭을 한 바퀴 둘러본다. 화면 왼쪽(모바일은 아래)의 탭 순서는 이론 · 분석 · 내디자인 · 와이어 · 갤러리 · 퀴즈 그대로다. 출발점은 이론 탭 — 여기서 익힌 말을 곧장 앱 빌더에 옮겨 화면을 만든다.

용어 암기는 AI를 잘 쓰기 위해서다

이론 탭의 'UI 용어 사전'은 솔직히 말해 암기 과목이다. 각 명칭을 외우는 곳이다. 그런데 중요한 건 외우는 이유다 — 예뻐 보이려는 게 아니라, AI를 잘 쓰기 위해서다.

AI에게는 기억력(컨텍스트) 관리 문제가 있다. 특별한 설정이 없으면 무슨 말을 하든 지금까지의 대화를 처음부터 끝까지 전부 훑어보고 답한다. 그래서 대화가 길어질수록 점점 멍청해지는 느낌을 받는다 — 겉으론 일하는 척해도 사실은 길을 잃고 헤맨다. 이걸 '컨텍스트 부패'라 부른다.

실제 화면 — UI 용어 사전, 카테고리를 펼쳐 하나씩 본다

번호를 누르면, 그 부분이 무엇인지 알려준다

UI 용어 사전 안에는 '앱 화면 해부도'가 있다. 레시피 앱 목업("오늘의 추천 레시피") 위의 번호를 누르면, 그 부분이 무엇인지 아래에서 알려준다. 헤더·입력 필드·카드·칩·배지처럼, 화면을 이루는 부품마다 이름이 있다는 걸 눈으로 확인하는 곳이다.

😌 외우기, 쉽다

대부분 이미 많이 써서 다 아는 것들인데, 이름만 몰랐을 뿐이다. 모양을 보면 "아, 이게 그거구나" 하고 바로 붙는다.

🤝 이름을 알아야

명칭을 알면 만들기가 훨씬 편하다. 사람도 제품도 — 이름을 알아야 같이 일하기 편하다. AI라는 동료도 똑같다.

실제 화면 — 번호 1~12가 화면 부품, 오른쪽이 그 이름표

이미 쓰던 것들에, 이름표를 붙인다

용어 사전은 8개 묶음, 약 50여 개 용어를 아코디언으로 펼쳐 본다. 회원가입 칸·필터·네모 상자처럼 늘 보던 것들인데 이름만 몰랐을 뿐이다. 다 외울 필요 없이, 화면과 하나씩 매칭하며 훑어 두면 AI에게 주문할 때 바로 꺼내 쓸 수 있다.

같은 화면, 주문하는 말에 따라 결과가 갈린다

이론 탭에서 익힌 명칭은 앱 빌더에서 곧장 힘을 발휘한다. 같은 화면을 만들어도, 정확한 명칭으로 주문하면 AI가 한 번에 알아듣는다.

규칙은 사람의 행동에서 나온다

이론 탭의 두 번째 서브탭 '디자인 원리'는 색의 3요소·구도 같은 '아름답게' 만드는 규칙이 아니다. 사람을 편하게 하는 디자인과 아름답게 하는 디자인은 다르다. 이건 UX, 사람의 행동 원리를 바탕으로 세운 규칙이라, 왜 그런지를 알면 외우지 않아도 따라온다. (원리는 구조 · 시각 · 인터랙션 · 기타 네 묶음으로 약 20가지가 정리돼 있고, 각 원리마다 좋은 예 / 아쉬운 예를 나란히 보여 준다.)

좋은 디자인은 '예쁜 것'이 아니라 '익숙한 것'

쿠팡 화면을 떠올려 보자. 이 UI는 미술관의 예술적인 문구 디자인보다, 오히려 공문서·보고서 양식에 훨씬 가깝다 — 헤더(제목) 아래 캡션이 붙고, "할인 중·도착 보장"처럼 명사형으로 종결되고, 줄 간격·패딩이 가지런하다. 매체가 종이냐 화면이냐만 다를 뿐, 일상을 사는 사람을 위한 같은 양식이다.

화면 디자인은 사실, 문서 작성과 똑같다

놀랍게도 화면 UI 디자인의 원리는 문서 작성 양식과 거의 그대로 겹친다. 우리가 보고서·문서에서 이미 하던 것들이다.

마음에 드는 화면을 올리면, AI가 해부해 준다

분석 탭('스크린샷 분석하기')은 간단하다. 카카오톡·인스타그램·유튜브처럼 평소 쓰는 앱의 스크린샷(JPG·PNG·WebP, 5MB 이하)을 올리고 'AI 분석 시작 →'을 누르면, 그 안의 UI를 부위별로 분석해 준다. 시간은 약 10~20초 걸린다.

🔬 결과로 보여 주는 것

• 선택한 요소 — 부품을 클릭/호버하면 그 자리를 짚어 설명
• 요소 목록 — 헤더바·카드·버튼 등 부위 목록
• 프롬프트 · 인사이트 — 다시 만들 프롬프트(복사) + 디자인 인사이트
• 디자인 토큰 — 색상·간격·타이포 값(JSON 복사)
• UX 종합분석 — 어떤 UX를 의도했는지까지

실제 화면 — 라벨을 누르면 '선택한 요소' 패널에 배경색·역할이 뜬다

레퍼런스를 만져 보고 → 앱 빌더에 옮긴다

내디자인 탭('내 디자인 스타일 만들기')은 유명 앱을 레퍼런스로 불러와 색·글자·모양을 직접 바꿔 보며 '내가 원하는 느낌'을 잡는 곳이다. 추천 레퍼런스로 토스·당근·무신사·배달의민족·카카오톡 등이 있다.

🎨 무엇을 만지나

색 팔레트(주요·텍스트·배경)·분위기·글꼴 느낌·제목/본문 글자 크기·굵기까지 바꿔, 만들 느낌을 설정값으로 정한다.

🔗 앱 빌더로 넘기기

잡은 스타일은 '내 스타일 복사'로 Markdown이 복사된다. 앱 빌더의 '자유 만들기' 채팅에 붙여넣고 "이 스타일로 만들어줘"라고 하면 반영된다.

실제 화면 — 토스를 레퍼런스로 골라 색·글자를 조정 중인 화면

한 화면이 아니라, 화면과 화면의 '흐름'

와이어 탭('화면 흐름 그리기')은 내가 만들 앱이 화면 → 화면으로 어떻게 이어지는지를 순서대로 늘어놓아 설계하는 곳이다. 처음엔 예시 흐름(프리셋)으로 시작하면 쉽다.

🧩 예시 흐름 (프리셋 7종)

빈 흐름 · 배달 주문 · 사진 SNS · 영상 앱 · 웹툰 · 중고거래 · 가계부 — 골라서 바로 시작하고, '빈 흐름'으로 직접 새로 설계할 수도 있다.

🗺️ 흐름 패턴 가이드

'이런 흐름이 많아요'에 둘러보기형·입력형·탐색거래형 등 8가지 패턴과 야콥의 법칙 설명이 있다.

실제 화면 — '기록 앱' 프리셋, 화면 3개가 화살표로 이어진다

같은 수업의 결과물이 한곳에 모인다

내디자인·와이어·분석 탭의 '갤러리에 공유'를 누르면 같은 수업의 결과물이 모인다. 작품은 앱 분석 · 와이어프레임 · 내 디자인 스타일 3종 배지로 구분되고, 화면을 같이 보고 이야기하는 수업용 공간이다.

실제 화면 — 와이어프레임·내 디자인 스타일·앱 분석 작품이 나란히 보인다

배운 것을 OX로 점검한다

UI 이미지를 보고 맞히는 OX 퀴즈(O 좋은 디자인 / X 아쉬운 디자인)다. 총 10문제, 첫 문제는 연습(타이머 없음), 그다음부터 15초 타이머 + 연속 보너스가 붙는다. 끝나면 등급·약점 리포트가 뜬다. 혼자 풀거나, 교사가 시작하는 라이브(프로젝터) 모드로 다 같이 풀 수 있다.

❓ 한 문제의 구조

"이 화면은 사용자가 보기 편한 디자인인가요?" 질문 아래 UI 미리보기가 뜨고, O(좋은 디자인) / X(아쉬운 디자인) 두 버튼 중 고른다. 막히면 '힌트 보기'.

🏫 교실에서

이론 탭에서 익힌 원리(시각적 계층 등)와 연결해, 정답보다 "왜 그렇게 골랐는지"를 옆 친구와 말해보게 한다.

실제 화면 — 1번 문제, 연습 모드(타이머 없음)

용어를 익혀, AI에게 정확히 주문한다