핵심 비유
'같이 일할 사람과 이름을 맞추는 일' 비유 — 새 동료와 협업할 때 가장 먼저 하는 건 서로 부르는 이름과 용어를 맞추는 것이다. "그거 거기 좀 옮겨줘"로는 일이 안 되고, "헤더 오른쪽 아이콘 버튼을 카드 하단으로"라고 해야 통한다. design-sense(디자인 모듈)의 이론 탭은 바로 그 '이름표'를 익히는 곳이다. 기획 모듈(plan)이 앱 빌더와 짝을 이루듯, 디자인 모듈도 앱 빌더와 나란히 켜 두고 쓴다 — 이론 탭에서 익힌 정확한 명칭으로 AI에게 화면을 주문하면, 만드는 속도와 품질이 같이 올라간다.
핵심 포인트
- 디자인 모듈은 앱 빌더와 병용한다. 기획 모듈처럼, 이론 탭에서 배운 용어로 앱 빌더에 화면을 주문하는 흐름이 기본이다. 이론을 따로 배우는 게 아니라 '만들기 위한 언어'로 배운다.
- 수업 세션에 들어가면 6개 탭이 있다 — 이론(UX/UI 디자인 이론) · 분석(캡처한 화면을 올리면 AI가 분석) · 내디자인(템플릿을 하나씩 고치며 변화를 관찰) · 와이어(화면 다음에 올 화면, 흐름 이해) · 갤러리(학생들이 만든 화면 감상) · 퀴즈(배운 용어·이론 OX).
- 이론 탭의 'UI 용어 사전'은 암기 과목이다. 각 명칭을 외우는 곳 — 그런데 외우는 이유가 핵심이다: AI를 잘 쓰기 위해서다.
- AI는 기억력(컨텍스트) 관리 문제가 있다. 무슨 말을 하든 지금까지의 대화를 처음부터 전부 훑어 답한다. 그래서 대화가 길어질수록 점점 멍청해지는 느낌을 받는다 — 그 기억(컨텍스트)을 사람이 관리해 줘야 하고, 그 도구가 바로 정확한 명칭이다.
- '앱 화면 해부도'에서 UI 번호를 누르면 해당 카드가 강조된다. 한 번에 다 외우는 건 생각보다 어렵지 않다 — 많이 써서 이미 다 아는 것들인데 이름만 몰랐을 뿐이다.
- 명칭을 알면 프로그램 만들기가 훨씬 편하다. 사람도 제품도 이름을 알아야 같이 일하기 편한 법이다.
- '디자인 원리'는 사람의 행동 원리(UX)를 바탕으로 세운 규칙이다. 예를 들어 로고·제목처럼 중요한 요소는 보통 화면 왼쪽에 둔다 — 인류의 약 90%가 오른손잡이이고, 오른손잡이는 무언가를 던지거나 쓸 때 시선이 자연스럽게 왼쪽을 향하기 때문이다. 그래서 사용자가 가장 먼저 볼 것들이 좌측에 온다.
- 화면 디자인은 사실 문서 작성 양식과 매우 닮았다. 시각적 계층(제목을 더 크게) · 정보 구조(목차처럼 넓은 범위에서 좁은 범위로) · 그리드 레이아웃(문서의 줄 맞추기) · 타이포그래피·일관성 — 전부 문서 작성에서 하던 것과 같다. 매체가 웹이냐 종이냐만 다를 뿐, 사람이 본다는 점이 같으니 원리도 같을 수밖에 없다. 그래서 서류·디자인을 잘하는 사람은 웹 디자인도 자연스럽게 잘하기 쉽다(운동 잘하는 사람이 어떤 운동이든 잘하듯).
교사 팁
첫 도입은 "AI랑 대화하다가 갈수록 말귀를 못 알아듣는 느낌 받은 적 있죠?"로 연다. 대부분 공감한다. 여기서 "그건 AI가 멍청해진 게 아니라, 우리가 이름을 안 알려줘서 매번 처음부터 다시 짐작하느라 그런 것"이라고 연결하면, '용어 암기'가 지루한 과목이 아니라 AI와 일하는 무기가 된다. 이어서 design-sense 이론 탭의 '앱 화면 해부도'를 열어 UI 번호를 직접 눌러 카드가 강조되는 걸 보여주고(많이 써서 이미 아는 것들임을 확인시키고), 곧장 앱 빌더를 나란히 띄워 같은 명칭으로 화면을 주문해 본다 — 기획 모듈과 똑같이 '배운 말 → 바로 만들기'로 잇는 게 핵심이다.
참고 자료
- design-sense (디자인 모듈)ko / interactive
이론·분석·내디자인·와이어·갤러리·퀴즈 6개 탭으로 구성된 UX/UI 디자인 학습 앱. 이 강의의 실습 무대.
- design-sense 분석 탭ko / interactive
화면을 캡처해 올리면 색·타이포·레이아웃을 AI가 분석. 이론에서 배운 명칭으로 결과를 읽는 연습에 쓴다.
- Laws of UXen / interactive
디자인 원리를 '사람의 행동 패턴'으로 정리한 카드 모음. "디자인 규칙은 행동에서 나온다"를 보여주는 데 효과적.
6개 탭, 무엇을 하는 곳인가
- 이론 — UX/UI 디자인 이론. UI 용어 사전(명칭 암기), 앱 화면 해부도, 디자인 원리를 익힌다. 이 강의의 출발점.
- 분석 — 마음에 드는 화면을 캡처해 올리면 AI가 그 페이지를 분석해 알려준다(색·글자·레이아웃 등).
- 내디자인 — 템플릿 형태로 요소를 하나씩 수정하면서 디자인이 어떻게 바뀌는지 직접 본다.
- 와이어 — 한 화면 다음에 어떤 화면이 나올지, 화면과 화면의 흐름을 이해하는 곳.
- 갤러리 — 학생들이 만든 화면 디자인을 모아 보는 곳.
- 퀴즈 — 이론에서 배운 디자인 용어와 이론을 OX 퀴즈로 점검한다.
좋은 예 vs 나쁜 예
- ✅ AI 주문: "헤더(상단 바) 왼쪽에 로고, 오른쪽에 아이콘 버튼. 본문은 카드 3개를 그리드로, 카드마다 제목(큰 글씨)·설명·1차 버튼." → 명칭이 정확해 AI가 한 번에 알아듣는다.
- ❌ AI 주문: "위에 메뉴 같은 거 넣고, 가운데에 예쁘게 박스 몇 개, 버튼도 적당히." → 모호해서 매번 다른 결과가 나오고, 고쳐 달라는 대화가 길어질수록 AI가 더 헤맨다.
- ✅ 로고·제목을 화면 왼쪽 위에 배치 → 사용자가 가장 먼저 보는 자리(오른손잡이 시선)에 핵심을 둔 선택.
- ❌ "그냥 예뻐서" 중요한 제목을 화면 구석에 작게 배치 → 이유(행동 원리) 없이 꾸민 선택은 사용자를 헤매게 한다.
실습·평가
- 실습: design-sense 이론 탭에서 앱 화면 해부도의 UI 명칭 5개를 고른 뒤, 그 명칭만 써서 앱 빌더에 화면 한 장을 주문한다. 같은 화면을 '모호한 말'로도 주문해 두 결과를 나란히 비교한다(명칭의 효과 체감).
- O/X 퀴즈: "AI와 대화할 때 정확한 UI 명칭을 쓰는 건 그냥 있어 보이려는 것일 뿐, 결과 품질과는 상관없다." → X (정확한 명칭 = AI의 컨텍스트 관리 = 결과 품질)
- O/X 퀴즈: "화면 디자인과 문서 작성은 매체가 달라서 지켜야 할 원리도 전혀 다르다." → X (사람이 본다는 점이 같아 시각적 계층·정보 구조·정렬·일관성 원리는 동일하다)