모톡은 디자이너를 위한 말하기 면접 연습 서비스예요. 이 문서는 모톡을 만들고 알릴 때 지키는 브랜드와 제품의 기준을 모았어요.
| 버전 | 날짜 | 내용 |
|---|---|---|
1.0.0 | 2026.10.14 | 첫 공개. 제품 방향을 ‘대본 외우기’에서 ‘프로젝트 폴더 꺼내기’로 바꾼 내용을 반영했어요. |
디자이너 면접에서 면접관이 듣고 싶은 건 결과물이 아니라 “왜 이렇게 했어요?”에 대한 답이에요. 모톡은 그 답을 말로 꺼내는 연습을 돕기 위해 시작했어요.
결과물은 이미 포트폴리오에 다 있어요. 그런데 결정의 이유는 머리로만 알고 있어요. 포트폴리오는 수십 장을 고치면서도 소리 내서 말해 본 적은 거의 없어요. 그래서 면접장에서는 말이 길어지고, 중요한 숫자는 빠지고, ‘약간’과 ‘뭔가’가 늘어나요.
대본을 외우면 질문이 조금만 바뀌어도 무너져요. 모톡은 프로젝트를 머릿속 폴더처럼 정리해 두고, 질문을 받으면 맞는 폴더를 꺼내 자기 말로 이야기하는 연습을 해요.
대본 외우기 → 폴더 꺼내기
새 기능을 더할 때는 이 네 단계 중 어디를 돕는지 먼저 물어요.
모톡이 무엇을 위해 있고, 어떤 태도로 말하는지 정해요. 화면 한 줄, 콘텐츠 한 장도 이 기준으로 판단해요.
| 구분 | 내용 |
|---|---|
| 미션 | 디자이너가 자기 작업을 자기 말로 설명할 수 있게 돕는다 |
| 슬로건 | 디자이너 면접, 톡처럼 편하게 |
| 포지셔닝 | 알고 있는 경험을, 말로 꺼내는 연습 |
세 가지 성격이 함께 있어야 모톡다워요. 하나만 강하면 친구가 되거나, 시험관이 되거나, 선배의 잔소리가 돼요.
이렇게 해요끝까지 들어요. 막혀도 기다리고, 해요체로 말해요.
하지 않아요점수로 겁주거나 불합격을 떠올리게 하지 않아요.
이렇게 해요빠진 근거와 숫자를 짚고, 고칠 방법을 같이 말해요.
하지 않아요“좋아요”만 하거나, 지적만 하고 끝내지 않아요.
이렇게 해요시안, 근거, 포폴처럼 디자이너의 말로 말해요.
하지 않아요위에서 가르치거나 어려운 용어로 꾸미지 않아요.
모의면접을 톡처럼. 이름에는 서비스가 하는 일과 그 일을 대하는 태도를 함께 담았어요.
모의면접 + 톡(Talk). 면접 연습을 메신저처럼 가볍게 시작한다는 뜻이에요.
영문은 소리 나는 그대로 적어요. MOTALK은 ‘모토크’로 읽혀서 MOTOK을 골랐어요.
모톡의 면접관 캐릭터. 모톡에 친근한 이름 끝소리를 붙였어요.
글 안에서는 한글 ‘모톡’을 먼저 써요. 영문 로고 옆이나 해외 채널에서만 MOTOK으로 적어요.
모톡에서 연습해 보세요본문에서는 한글
MoTok · 모TOK · Mo-Tok대소문자와 글자를 섞지 않아요
이름을 정하기까지 거쳐 온 후보예요.
MOTOK의 첫 O는 모키의 말풍선이에요. 같은 O인데 하나는 비어 있고, 하나는 눈을 뜨고 말하고 있어요. 로고는 브랜드를 대표하는 핵심이므로 왜곡하거나 바꾸지 않아요.
모톡의 대표 로고예요. 안팎의 모든 커뮤니케이션에서 가장 먼저 써요.
링 두께는 글자 획과 같아요. 눈은 위쪽에 짧고 통통하게 두어 일시정지 기호가 아닌 얼굴로 읽혀요. 꼬리는 링에서 끊김 없이 이어져 기준선에 닿아요.
나머지 글자는 단단한 기하학 형태예요. 날카로움은 글자가, 편안함은 말풍선이 맡아요.
로고 둘레에는 말풍선 O 높이의 1/2(X)만큼 비워 둬요.
읽을 수 있는 가장 작은 크기예요.
워드마크 · 화면 80px · 인쇄 20mm
심볼 · 화면 16px · 인쇄 5mm이름의 표기부터 말풍선의 눈 위치까지, 여덟 단계에 걸쳐 좁혀 간 과정이에요. 단계마다 남긴 기준이 지금의 로고 규칙이 됐어요.
면접 연습 서비스가 주는 긴장을 덜어 내는 것이 출발점이었어요. 로고가 전해야 할 말과 피해야 할 말을 먼저 정했어요.
‘모’와 ‘O’ 양쪽에 말풍선을 넣어 비교했어요. 둥근 O는 말풍선과 형태가 같아 단어 안에 자연스럽게 섞였고, 앱 아이콘과 해외 채널까지 하나의 형태로 이어 갈 수 있어 영문 워드마크를 대표로 정했어요.
글자 수를 줄일수록 심볼이 커지고 기억하기 쉬워져요. 다만 MOTK는 발음이 사라지고 MOTALK은 ‘모토크’로 읽혀, 소리 나는 그대로이면서 O가 두 번 반복되는 MOTOK으로 정했어요.
세리프, 슬랩, 휴머니스트, 그로테스크, 기하학 산세리프를 같은 조건에서 비교했어요. 정원에 가까운 O를 가진 기하학 산세리프가 말풍선과 가장 잘 맞아서, 이 방향을 바탕으로 굵기와 폭을 조정했어요.
형태, 꼬리 위치, 눈 모양, 링 두께, 크기, 기울기를 하나씩 바꿔 가며 16안을 그렸어요. 눈이 없으면 그냥 아이콘이 되고, 눈을 가운데 두면 일시정지 기호로 읽혔어요.
검정 말풍선은 다른 글자에 묻혀 모키가 사라졌고, 크게 키우면 단어의 리듬이 깨졌어요. 주황 한 가지로 말풍선만 강조하고, 크기는 글자 높이에 맞췄어요.
수치가 같아도 눈에는 다르게 보여요. 둥근 형태와 꼬리의 무게를 고려해 네 군데를 보정했어요.
워드마크, 심볼, 앱 아이콘이 하나의 말풍선으로 이어져요. 16px 파비콘에서도 눈 두 개가 읽히도록 심볼의 눈 간격을 넉넉하게 남겼어요.
앱 아이콘모톡 — 디자이너 면접파비콘 16px
어두운 배경배경 밝기에 따라 고르는 네 가지 버전이에요.
로고를 바꾸거나 꾸미면 모톡이 같은 브랜드로 보이지 않아요.
정해진 비율을 늘리거나 줄이지 않아요.
로고를 돌리거나 기울이지 않아요.
말풍선을 다른 색으로 바꾸지 않아요.
주황 배경에는 흰색 단색 로고를 써요.
그림자, 테두리, 빛 효과를 넣지 않아요.
비슷한 서체로 로고를 새로 만들지 않아요.
컬러는 모톡을 알아보게 하는 가장 빠른 요소예요. 주황은 쓸수록 힘이 약해지므로, 한 화면에서 가장 중요한 하나에만 써요.
모톡을 대표하는 세 가지 색이에요. 색을 누르면 HEX 값이 복사돼요.
취업 · 채용 서비스는 대부분 신뢰를 뜻하는 파랑을, AI 면접 서비스는 기술을 뜻하는 남색과 보라를 써요. 모톡은 그 반대편의 주황으로 ‘시험’이 아니라 ‘대화’를 말해요.
배경과 보조에 쓰는 색이에요. 결과는 Good, 오류와 지우기는 Bad로 표시해요.
글자는 배경과의 대비가 4.5:1 이상이어야 읽혀요(WCAG AA). 브랜드 주황(#FF5A1F)은 흰 바탕에서 3.1:1이라 작은 글자에 쓰면 안 돼요. 글자에는 아래 Ink 색을 써요.
#C2410C · 흰 바탕 5.2:1주황 글자 · 주황 칩 · 링크#027A4B · 흰 바탕 5.4:1잘한 점 · 꺼낸 칸 글자#C81E2F · 흰 바탕 5.7:1오류 문구| 글자 / 배경 | 견본 | 대비 | 판정 |
|---|
주황 버튼의 흰 글자는 큰 글자 기준(3:1)만 통과하므로 버튼 글자는 굵게(600 이상) 써요. 판정: AA 모든 글자 · 큰 글자만 18.7px 굵게 또는 24px 이상 · 불가 글자에 쓰지 않음
한 화면에서 배경 70 · 잉크 20 · 주황 10을 넘지 않아요.
배경 색에 따라 쓰는 로고 버전이에요.
나머지 이동은 검정이나 회색으로 둬요.
강조가 둘이면 어느 것도 눈에 들어오지 않아요.
한글과 영문 모두 Pretendard 하나로 써요. 강조는 굵기를 더하기보다 주황 한 단어로 해요.
대체 서체 순서: Pretendard → Apple SD Gothic Neo → 시스템 산세리프
랜딩, 콘텐츠, 키 비주얼에 쓰는 크기예요. 앱 화면 크기는 Type Scale에 있어요.
가장 하고 싶은 말 하나만 주황으로 둬요.
말로 꺼내는 연습
색, 밑줄, 굵기를 한꺼번에 쓰지 않아요.
말로 꺼내는 연습
줄바꿈은 단어 단위로 해요. 한 문장이 두 줄을 넘으면 문장을 줄여요.
모키는 모톡의 면접관이에요. 끝까지 듣고, 빠진 곳을 정확히 짚어 주는 다정한 면접관이에요.
| 생김새 | 주황 유리 말풍선, 세로로 긴 눈 두 개, 볼 홍조 |
| 입 | 없어요. 말풍선이 곧 모키의 목소리예요. |
| 성격 | 끝까지 듣고, 빠진 곳을 정확히 짚어요. |
| 목소리 | 차분한 해요체. 녹음한 목소리를 먼저 쓰고, 없으면 기본 음성으로 읽어요. |
3D 모키를 쓸 수 없는 작은 크기 · 인쇄 · 아이콘에는 평면 모키를 써요. 얼굴만 쓰고 팔다리는 그리지 않아요.
변주는 세 가지까지만 해요. ① 눈의 모양(막대 · 아치 · 가로선)과 길이 · 위치 ② 단색 처리 ③ 소품 하나. 링, 꼬리, 볼 홍조의 위치는 바꾸지 않아요.
표정
색
소품
활용
24px 아래에서는 볼 홍조를 빼고 심볼을 써요.
16 · 심볼24 · 심볼
48 · 2D96 · 2D
96+ · 3D| 상황 | 쓰는 모키 |
|---|---|
| 파비콘 · 앱 아이콘 · 16~24px | 심볼 (볼 홍조 없음) |
| 채팅 아바타 · 팁 · 32~64px | 2D 또는 3D 얼굴 |
| 인쇄 · 굿즈 · 단색 인쇄 | 2D (주황 단색 가능) |
| 화면 일러스트 · 콘텐츠 · 영상 | 3D 포즈 |
앱의 흐름 순서대로 상황마다 정해진 포즈를 써요. 한 화면에는 모키를 한 번만 둬요.
손 인사첫 화면 · 소개
폴더 안기프로젝트 폴더 정리 완료
빈 폴더아직 기록 없음
스톱워치빠른 꺼내기헤드셋면접 시작
듣기답변 듣는 중
손 들기크리틱 질문
발표 보드포트폴리오 PT
돋보기리포트 분석 중
엄지연습 완료
인사면접 종료얼굴채팅 아바타 · 팁새 3D 모키를 만들 때 지키는 기준이에요. 아래 프롬프트를 바탕으로 포즈와 소품만 바꿔요.
| 요소 | 기준 |
|---|---|
| 재질 | 반투명 주황 유리 테두리 + 우윳빛 복숭아색 얼굴. 매끈하고 광택 있게. |
| 조명 | 위 · 왼쪽에서 부드러운 스튜디오 조명. 테두리에 하이라이트 한 줄. |
| 배경 | 단색 또는 투명. 콘텐츠용은 Cream · Night 중 하나. |
| 그림자 | 아래에 옅고 넓게. 진하고 각진 그림자는 쓰지 않아요. |
| 손 | 작고 둥근 주황 유리 손. 다리는 그리지 않아요. |
| 소품 | 한 개까지. 헤드셋 · 카드 · 돋보기처럼 면접과 관련된 것. |
참조 이미지로 기존 모키 2장을 함께 넣어야 생김새가 유지돼요.
앱 안과 SNS에서 모키의 태도가 달라요. 생김새와 말투의 기본은 같아요.
끝까지 듣고, 고칠 방법을 같이 알려 줘요.
“결론부터 말했어요. 숫자를 하나 더 넣어 볼까요?”
놀리는 대상은 미루는 습관이에요. 사람이나 결과는 놀리지 않아요.
“새벽 2시. 포폴은 또 고치면서 말은 안 해 보네요?”
모키는 크게 움직이지 않아요. 눈을 감았다 뜨고, 고개를 숙이고, 천천히 떠 있는 정도예요.
| 동작 | 값 | 쓰는 곳 |
|---|---|---|
| 인사 (Bow) | 1.9s cubic-bezier(.45,0,.25,1) · 숙임 25~55% · 아래로 12px, -3°, 세로 0.9 | 면접 종료 |
| 눈 감기 | scaleY(.14) · 인사와 같은 타이밍 | 인사 · 생각 중 |
| 떠 있기 | 3.2s ease-in-out infinite · 위로 6px | 대기 화면 |
| 3D 떠오르기 | 영상 4s · 24fps · 아래에서 위로, 끝에서 정면 응시 | 릴스 · 링크드인 |
| 등장 | 0.5s cubic-bezier(.2,.8,.2,1) · 아래 16px, 0.92배에서 | 모키가 처음 나올 때 |
| 목소리 | 기준 |
|---|---|
| 톤 | 차분한 여성 목소리, 해요체. 질문 끝은 내려서 재촉하지 않아요. |
| 파일 | 자주 쓰는 37문장은 녹음 파일로 재생하고, 나머지는 같은 목소리로 생성해요. |
| 설정 | ElevenLabs · stability 0.45 · similarity 0.75 |
| 표기 | 무료 목소리는 비상업 용도로만 쓰고 ‘Voice by ElevenLabs’를 표기해요. |
연습 기록으로 정하는 ‘나의 면접 말버릇 유형’이에요. 공유 카드의 주인공으로 써요.
TMI 서사형
‘약간’ 장인
우리 팀 대변인
숫자 수집가
결론부터 직진형
차분한 정석형모키의 얼굴은 눈 두 개와 볼 홍조가 전부예요. 아래처럼 바꾸면 모키가 아니에요.
말풍선이 목소리예요. 입 · 이 · 혀를 그리지 않아요.
하트 · 별 · 동그라미 눈은 쓰지 않아요.
눈썹 · 삿대질 · 팔짱으로 몰아붙이지 않아요. 다리도 그리지 않아요.
찰흙 · 무광 · 갈색으로 만들지 않아요. 유리와 광택이 모키예요.
아바타와 일러스트를 함께 쓰면 누가 말하는지 흐려져요.
불합격 · 외모 · 실력을 놀리지 않아요. 놀리는 대상은 미루는 습관뿐이에요.
“이러니까 떨어지죠” ✕“1분이라면서요.” ○
모톡은 해요체로, 결론부터 말해요. 앱 안에서는 다정하게, SNS에서는 조금 더 짓궂게. 기준은 같아요.
| 원칙 | 설명 |
|---|---|
| 해요체 | 존중하되 딱딱하지 않게 말해요. |
| 결론 먼저 | 첫 문장에 하고 싶은 말을 둬요. |
| 칭찬은 짧게 | 고칠 점은 고칠 방법과 함께 말해요. |
| 디자이너의 말 | 시안, 근거, 포폴처럼 디자이너가 쓰는 단어로 말해요. |
| 상황 | 이렇게 | 피하기 |
|---|---|---|
| 앱 안내 | 어느 칸을 꺼냈는지 보여 드려요. | 본 기능을 통해 발화 내용을 분석합니다. |
| 피드백 | 결론부터 말했어요. 숫자를 하나 더 넣어 볼까요? | 답변이 다소 장황합니다. |
| 오류 | 마이크를 허용해야 면접을 볼 수 있어요. | 오류가 발생했습니다. (권한 거부) |
| SNS | 1분이라면서요. | 자기소개를 1분 내로 하는 5가지 꿀팁! |
| 알림 | 오늘도 안 하면, 면접관이 대신 물어볼 거예요. 훨씬 무섭게. | ⚠️ 면접 준비를 잊지 마세요!! |
‘우리’가 4번 나왔어요.
내가 정한 것 하나를 ‘제가’로 말해 볼까요?
주어가 불명확합니다.
로고의 말풍선 O를 크게 키워 그래픽으로 써요. 한 장면에는 그래픽 요소를 하나만 둬요.
| 규칙 | 설명 |
|---|---|
| 하나만 | 프레임, 눈, 패턴 중 한 장면에 하나만 써요. |
| 크게 | 화면 밖으로 잘릴 만큼 크게 써야 그래픽으로 읽혀요. |
| 문장은 짧게 | 프레임 안 문장은 두 줄을 넘지 않아요. |
| 로고는 아래 | 그래픽이 주인공일 때 로고는 작게 아래에 둬요. |
앱 코드(styles.css)에서 쓰는 색 토큰이에요. 화면을 만들 때는 HEX 대신 토큰 이름으로 불러요.
글자와 배경의 단계는 모두 이 회색에서 골라요.
| 토큰 | 값 | 쓰는 곳 |
|---|
앱 화면의 글자 크기예요. 본문은 15~16px, 보조 글자는 12px 아래로 내려가지 않게 해요.
버튼과 입력칸은 같은 높이 단계를 써서 한 줄에 놓여도 어긋나지 않게 해요.
작은 버튼은 36, 기본 버튼과 입력칸은 48, 화면의 마지막 행동은 56이에요.
4의 배수로 간격을 정해요.
아이콘은 선으로만 그려요. 둥근 끝과 둥근 모서리로 모키의 부드러움을 이어 가요.
| 규칙 | 값 |
|---|---|
| 그리드 | 24 × 24 · 안쪽 2px 여백 |
| 선 | stroke-linecap round · stroke-linejoin round · fill none |
| 색 | currentColor · 글자와 같은 색을 따라가요 |
작게 쓸수록 선을 조금 굵게 해서 보이는 무게를 맞춰요.
움직임은 짧고 부드럽게. 페이지가 바뀔 때는 View Transitions로 이어지듯 넘어가요.
견본을 누르거나 마우스를 올려 보세요.
0.15s ease0.3s spring0.5s spring| 이름 | 값 | 쓰는 곳 |
|---|---|---|
| Hover | 0.15s ease | 버튼 · 입력칸 색 변화 |
| Press | scale(0.98) · 0.1s | 누르는 순간 |
| Enter | 0.3s cubic-bezier(.2,.8,.2,1) | 토스트 · 다이얼로그 · 페이지 |
| Fresh | 0.5s cubic-bezier(.2,.8,.2,1) | 새로 만든 카드 |
‘동작 줄이기’ 설정을 켠 사용자에게는 애니메이션 없이 바로 보여 줘요.
버튼은 역할에 따라 색이 정해져요. 한 화면의 주 행동 하나만 주황(accent)이에요.
| 클래스 | 배경 / 글자 | 쓰는 곳 |
|---|---|---|
.btn.accent | --accent / #fff | 화면의 주 행동 하나 |
.btn.primary | --ink / #fff | 다음 단계로 이동 |
.btn | --grey-100 / --ink-2 | 보조 행동 |
.btn.weak | --accent-weak / --accent | 추가 · 선택처럼 가벼운 행동 |
.btn.ghost | none / --muted | 건너뛰기 · 닫기 |
.btn.danger | --bad-weak / --bad | 지우기 |
입력칸은 테두리 없이 회색으로 채워 두고, 누르면 흰 바탕에 주황 테두리로 바뀌어요.
| 상태 | 값 |
|---|---|
| 기본 | bg --grey-100 · border transparent · h 48 · r 14 |
| Hover | bg --grey-200 |
| Focus | bg #fff · border 1.5px --accent |
| Placeholder | --grey-400 |
칩은 상태와 분류를 짧게 보여 주고, 세그먼트는 여러 개 중 하나를 고를 때 써요.
회사 키워드처럼 여러 개를 고를 때 써요. 고른 칩만 주황 테두리가 생겨요.
앱 바탕은 회색(--grey-100), 내용은 테두리 없는 흰 카드에 담아요.
대표 작업 하나를 3분 동안 설명해요. 모키가 중간에 질문해요.
bg #fff · radius 24 · padding 24 · 그림자 없음
모키의 팁은 화면 아래쪽에 둬요. 주 행동보다 먼저 눈에 띄지 않게 해요.
무엇을 했는지 한 문장으로 시작하고, 그 선택을 한 이유를 이어 말해요.
프로젝트 폴더는 모톡의 핵심 부품이에요. 칸마다 꺼낼 키워드 2~3개만 적어요. 문장이 아니라 꺼낼 거리예요.
일반 면접의 STAR에 디자이너 면접에서 꼭 묻는 ‘내 몫’과 ‘버린 시안’을 더했어요.
| 칸 | 묻는 것 |
|---|---|
| 상황 | 누가, 어디서, 왜 불편했나요? |
| 내 몫 | 팀이 아니라 내가 직접 맡고 정한 것 |
| 고른 것 | 내가 내린 디자인 결정 |
| 버린 시안 핵심 | 검토했지만 고르지 않은 안. 면접관이 가장 많이 파고드는 칸이에요. |
| 고른 기준 | 왜 그걸 골랐나요? 사용자 · 데이터 · 제약 조건 |
| 결과 | 직군마다 달라요. UX는 지표, 브랜드는 인지도, 콘텐츠는 반응 |
| 배운 점 | 다시 한다면 무엇을 바꿀까요? |
면접 화면은 어두운 바탕(Night)이에요. 연습 단계가 오를수록 화면의 도움이 줄어들어요.
보조 바퀴 1 · 2 · 3단계. 3단계는 실전처럼 아무것도 보여 주지 않아요.
SNS에서는 미루는 습관을 다 아는 모키가 화자예요. 정보는 짧게, 장면은 크게.
| 형식 | 크기 | 구성 |
|---|---|---|
| 포스터 | 1080×1350 | 말풍선 O 그래픽 또는 모키의 눈 + 한 줄 카피 |
| 카드뉴스 | 1080×1350 | 상단 주제 · 큰 제목 · 본문 카드 · 하단 로고 |
| 릴스 | 1080×1920 | 위아래 UI 여백 확보, 큰 자막, 3D 모키 컷 |
| 링크드인 | 1080×1350 | 무음으로 읽히는 큰 자막, 30초 이내, 음악 박자에 맞춘 컷 |
| 유형 카드 | 1080×1920 | 유형 모키 · 유형 이름 · 모키 한줄평 · “너는 무슨 유형?” |
앱, 랜딩, 공유 카드까지 어디서나 같은 목소리로 말해요.
로고와 서체 파일이에요. 로고는 SVG로 쓰고, 고치지 않아요.