바이브코딩 초보를 위한
UI/UX 자기점검법

1단계 전략 · 누가, 왜 쓰는 앱인가

1. 1-1첫 화면만 봐도 이 앱을 누가(교사, 학생 등), 어떤 수업 상황에서 쓰는지 바로 알 수 있다.
2. 1-2첫 화면 맨 위에 이 앱을 쓰면 무엇이 편해지는지(써야 하는 이유)가 한 문장으로 적혀 있다.
3. 1-3앱 이름 바로 옆이나 아래에 이 앱이 무슨 일을 하는 도구인지 풀어 쓴 짧은 설명(부제)이 붙어 있다.

2단계 범위 · 무엇을 넣고 무엇을 뺄까

1. 2-1수업에 꼭 필요한 핵심 기능 1~2가지만 첫 화면에 나와 있고, 없어도 되는 부가 기능은 빼거나 접어 두기 버튼 안에 숨겨져 있다.
2. 2-2화면 안에 세 줄이 넘어가는 긴 설명글이 없고, 각 안내 문구가 두 줄 이내로 짧게 적혀 있다.
3. 2-3AI가 습관처럼 만들어 넣은 영어 꼬리표, 장식용 환영 인사, 뜻 없는 꾸밈 문구가 화면에서 모두 빠져 있다.

3단계 구조 · 어떤 순서로 흘러가나

1. 3-1앱을 열자마자 사용자가 가장 먼저 해야 할 첫 단계(예: 파일 올리기, 모둠 고르기)가 첫 화면 한가운데에 바로 나온다.
2. 3-2다음 단계로 넘어갈 때 '학급 아이디'처럼 만든 사람만 아는 용어를 묻지 않고, 교실에서 쓰는 쉬운 말과 입력 예시를 함께 보여 준다.
3. 3-3처음 들어왔을 때 뜨는 사용법 안내(화면 둘러보기)에 '건너뛰기' 버튼이 있고, 한 번 닫으면 브라우저(로컬 저장소)에 기억해서 다시 뜨지 않는다.

4단계 뼈대 · 무엇을 어디에 둘까

1. 4-1수업 중에 가장 자주 쓰는 핵심 기능 버튼이 보조 도구바 안에 섞여 있지 않고, 따로 떨어진 자리(예: 화면 위에 떠 있는 플로팅 버튼)에 놓여 있다.
2. 4-2한 화면 안에 스크롤 막대가 1개 이하로만 있고, 안쪽 상자에 또 다른 세로 스크롤이 겹쳐 생기지 않는다.
3. 4-3탭 메뉴를 바꾸거나 다음 단계 버튼을 누를 때 내용을 감싸는 바깥 상자(컨테이너)의 가로세로 크기가 들쭉날쭉 변하지 않고 고정되어 있다.

5단계 표면 · 어떻게 보이나

1. 5-1본문 글자 크기가 16px 이상이고, 글자 색과 배경 색의 명도 대비(밝기 차이)가 4.5:1 이상이어서 흐릿하게 묻히는 글자가 없다.
2. 5-2손가락이나 마우스로 누르는 모든 버튼의 가로와 세로 크기가 각각 44px 이상이고, 화면 가로 폭을 320px로 줄여도 요소가 밖으로 잘리지 않는다.
3. 5-3한 화면에서 가장 먼저 눌러야 할 핵심 버튼 하나만 진한 강조 색으로 칠해져 있고, 나머지 보조 버튼은 연한 배경이나 테두리로만 표시되어 있다.

1~3단계 레퍼런스

4·5단계 레퍼런스와 원리의 원문