엔의 생명과학
바이브코딩

UI/UX 점검표

만든 웹앱을 다섯 단계로 점검하고 걸린 항목은 AI에게 줄 요청문으로 바꿉니다.

1단계부터 봅니다. 앞 단계에서 걸리면 뒤 단계는 나중에 고칩니다.

적은 내용은 이 브라우저에만 저장되고 어디에도 보내지 않습니다.

결과 요약과 AI 점검 요청문에 들어갑니다.
1단계

전략

누가, 왜 쓰는 앱인가

  1. 1-1첫 화면만 봐도 이 앱을 누가(교사, 학생 등), 어떤 수업 상황에서 쓰는지 바로 알 수 있다.

    확인 방법과 근거
    확인 방법
    앱의 첫 화면을 열고, 만든 사람의 설명 없이 화면에 적힌 글자만 읽었을 때 '누가 언제 쓰는 앱인지'를 5초 안에 말할 수 있는지 확인한다.
    근거
    Garrett 『사용자 경험의 요소』의 전략 단계, 5초 테스트
    실제로 받은 피드백

    공명이걸 누가 왜 쓸까요?

  2. 1-2첫 화면 맨 위에 이 앱을 쓰면 무엇이 편해지는지(써야 하는 이유)가 한 문장으로 적혀 있다.

    확인 방법과 근거
    확인 방법
    첫 화면 가장 위쪽 영역에 앱의 핵심 도움을 알려 주는 한 줄 소개 문장이 있는지 눈으로 찾아본다.
    근거
    5초 테스트, Krug 『사용자를 생각하게 하지 마!』
    실제로 받은 피드백

    공명써야 되는 이유만 메인에 보여 줘도 써요.

  3. 1-3앱 이름 바로 옆이나 아래에 이 앱이 무슨 일을 하는 도구인지 풀어 쓴 짧은 설명(부제)이 붙어 있다.

    확인 방법과 근거
    확인 방법
    화면 맨 위의 앱 이름을 손으로 가리고 주변 설명만 읽어도 무슨 기능을 하는 앱인지 바로 알 수 있는지 확인한다.
    근거
    Krug 『사용자를 생각하게 하지 마!』
    실제로 받은 피드백

    공명‘공명’ 자체가 이 앱의 정체성을 설명해 주나?

    공명저는 처음에 공명이라길래 사실 눌러 보지도 않았어요.

2단계

범위

무엇을 넣고 무엇을 뺄까

  1. 2-1수업에 꼭 필요한 핵심 기능 1~2가지만 첫 화면에 나와 있고, 없어도 되는 부가 기능은 빼거나 접어 두기 버튼 안에 숨겨져 있다.

    확인 방법과 근거
    확인 방법
    화면에서 당장 빼도 수업이 돌아가는 기능 버튼이 몇 개인지 세어 보고, 핵심 기능과 같은 크기로 나란히 놓여 있는지 확인한다.
    근거
    Hick의 법칙, 점진적 공개
    실제로 받은 피드백

    공명부가 기능은 개인의 취향에 맞게 쓰든 말든 하면 됩니다.

  2. 2-2화면 안에 세 줄이 넘어가는 긴 설명글이 없고, 각 안내 문구가 두 줄 이내로 짧게 적혀 있다.

    확인 방법과 근거
    확인 방법
    화면 전체에서 글자가 모여서 세 줄 이상 길게 적힌 설명 상자가 있는지 찾아서 줄 수를 세어 본다.
    근거
    인지 부하, Krug 『사용자를 생각하게 하지 마!』
    실제로 받은 피드백

    공명읽을 게 많을수록 안 씁니다 사람들은.

  3. 2-3AI가 습관처럼 만들어 넣은 영어 꼬리표, 장식용 환영 인사, 뜻 없는 꾸밈 문구가 화면에서 모두 빠져 있다.

    확인 방법과 근거
    확인 방법
    화면 위부터 아래까지 읽으면서 수업 진행에 아무 쓸모가 없는 감성 문구나 영어로 된 작은 제목이 몇 개인지 세어 본다.
    근거
    Nielsen 휴리스틱 8번(미학적이고 미니멀한 디자인)
    실제로 받은 피드백

    A2OAI로 코드 짜면 쓸데없는 문구가 너무 많이 나오죠.

3단계

구조

어떤 순서로 흘러가나

  1. 3-1앱을 열자마자 사용자가 가장 먼저 해야 할 첫 단계(예: 파일 올리기, 모둠 고르기)가 첫 화면 한가운데에 바로 나온다.

    확인 방법과 근거
    확인 방법
    앱 주소를 처음 열었을 때 다른 메뉴를 누르지 않고도 첫 번째 핵심 작업을 바로 시작할 수 있는지 확인한다.
    근거
    Garrett 『사용자 경험의 요소』의 구조 단계, Krug 『사용자를 생각하게 하지 마!』
    실제로 받은 피드백

    공명사용자 화면 첫 페이지는 PPT나 PDF를 HTML로 변환하기부터 나와야죠.

  2. 3-2다음 단계로 넘어갈 때 '학급 아이디'처럼 만든 사람만 아는 용어를 묻지 않고, 교실에서 쓰는 쉬운 말과 입력 예시를 함께 보여 준다.

    확인 방법과 근거
    확인 방법
    입력 칸이나 버튼 이름 중에 처음 온 학생이나 동료 교사가 '이게 뭐지?' 하고 되물을 만한 단어가 있는지 하나씩 읽어 본다.
    근거
    Nielsen 휴리스틱 2번(시스템과 현실 세계의 일치)
    실제로 받은 피드백

    A2O학급 아이디가 뭘까요?

  3. 3-3처음 들어왔을 때 뜨는 사용법 안내(화면 둘러보기)에 '건너뛰기' 버튼이 있고, 한 번 닫으면 브라우저(로컬 저장소)에 기억해서 다시 뜨지 않는다.

    확인 방법과 근거
    확인 방법
    안내 창에서 '건너뛰기' 버튼을 눌러 바로 닫을 수 있는지 보고, 새로고침(F5)을 눌렀을 때 똑같은 안내 창이 또 뜨는지 확인한다.
    근거
    Nielsen 휴리스틱 3번(사용자 제어와 자유)
    실제로 받은 피드백

    A2O화면 둘러보기 11번 클릭을 매번 해야 하는 걸까요?

    A2Oskip 버튼 달아 주시고 로컬에 저장시켜 주시면 좋을 듯.

4단계

뼈대

무엇을 어디에 둘까

  1. 4-1수업 중에 가장 자주 쓰는 핵심 기능 버튼이 보조 도구바 안에 섞여 있지 않고, 따로 떨어진 자리(예: 화면 위에 떠 있는 플로팅 버튼)에 놓여 있다.

    확인 방법과 근거
    확인 방법
    하단이나 상단 도구바를 보고, 가장 중요한 메인 버튼이 설정이나 지우개 같은 보조 버튼들과 똑같은 줄에 묻혀 있는지 확인한다.
    근거
    Fitts의 법칙, 게슈탈트 근접성
    실제로 받은 피드백

    공명실시간 기능이 메인이니까 아래 도구바에서 빼 놓는 게 좋을 거예요. 플로팅 버튼으로.

  2. 4-2한 화면 안에 스크롤 막대가 1개 이하로만 있고, 안쪽 상자에 또 다른 세로 스크롤이 겹쳐 생기지 않는다.

    확인 방법과 근거
    확인 방법
    화면 바깥쪽과 안쪽 상자에서 마우스 휠을 각각 굴려 보며 움직이는 스크롤 막대가 2개 이상 겹쳐 있는지 확인한다.
    근거
    인지 부하, Garrett 『사용자 경험의 요소』의 뼈대 단계
    실제로 받은 피드백

    A2O스크롤이 겹치면 UI가 좋지 않아요. 같은 페이지에 스크롤이 필요하다면 1개 이내가 좋아요.

  3. 4-3탭 메뉴를 바꾸거나 다음 단계 버튼을 누를 때 내용을 감싸는 바깥 상자(컨테이너)의 가로세로 크기가 들쭉날쭉 변하지 않고 고정되어 있다.

    확인 방법과 근거
    확인 방법
    화면 안의 탭이나 이전, 다음 버튼을 차례대로 눌러 보면서 바깥 상자의 테두리 위치가 위아래나 양옆으로 덜컥거리며 움직이는지 본다.
    근거
    구글 Core Web Vitals의 CLS
    실제로 받은 피드백

    A2O컨테이너 크기가 계속 바뀌니까 어지럽네요.

5단계

표면

어떻게 보이나

  1. 5-1본문 글자 크기가 16px 이상이고, 글자 색과 배경 색의 명도 대비(밝기 차이)가 4.5:1 이상이어서 흐릿하게 묻히는 글자가 없다.

    확인 방법과 근거
    확인 방법
    크롬 브라우저에서 F12를 눌러 본문 글자 크기가 16px 이상인지 보고, 연한 회색 글씨처럼 배경과 비슷해서 눈을 찌푸려야 보이는 곳이 있는지 확인한다.
    근거
    WCAG(대비 4.5:1, 본문 크기)

  2. 5-2손가락이나 마우스로 누르는 모든 버튼의 가로와 세로 크기가 각각 44px 이상이고, 화면 가로 폭을 320px로 줄여도 요소가 밖으로 잘리지 않는다.

    확인 방법과 근거
    확인 방법
    브라우저 창 가로 너비를 가장 좁게(320px) 줄여 본 뒤, 가로 스크롤이나 잘리는 글자가 없는지 보고 가장 작은 버튼의 높이가 44px 이상인지 확인한다.
    근거
    애플 HIG 터치 영역 44pt, Fitts의 법칙

  3. 5-3한 화면에서 가장 먼저 눌러야 할 핵심 버튼 하나만 진한 강조 색으로 칠해져 있고, 나머지 보조 버튼은 연한 배경이나 테두리로만 표시되어 있다.

    확인 방법과 근거
    확인 방법
    한 화면에 눈에 띄는 진한 원색 버튼이 몇 개인지 세어 보고, '저장'이나 '시작' 같은 핵심 버튼과 '취소' 같은 보조 버튼의 색이 똑같지 않은지 확인한다.
    근거
    시각적 위계

AI에게 줄 요청문

‘안 됨’과 ‘애매함’을 고른 문항을 1단계부터 차례로 요청문으로 바꿨습니다. 한 번에 하나씩 AI에게 주세요.

모든 요청문의 마지막 줄에 들어갑니다. 비워 두면 ‘지금 잘 작동하는 기능과 내용’이 들어갑니다.

‘안 됨’이나 ‘애매함’을 고른 문항이 생기면 여기에 요청문이 만들어집니다.

AI에게 점검 맡기기

화면 캡처나 코드와 함께 이 요청문을 AI에게 주면 같은 15문항으로 점검해 줍니다. 내 점검과 AI 점검이 엇갈리는 문항을 다시 봅니다.

요청문 펼쳐 보기
첨부한 내 웹앱 화면(또는 코드)을 아래 15문항으로 점검해 줘. 코드는 아직 고치지 마.
- 1단계 전략부터 차례로 봐 줘.
- 문항마다 ‘됨’, ‘애매함’, ‘안 됨’ 가운데 하나를 고르고 화면에서 찾은 근거를 한 줄로 적어 줘.
- ‘안 됨’이나 ‘애매함’이 있는 가장 앞 단계를 ‘먼저 볼 단계’로 알려 줘.
- 원칙에 어긋난 문제와 취향 문제를 나눠 줘.
- 고칠 것마다 [단계] [문제] [원하는 결과] [바꾸지 말 것] 형식으로 요청문을 하나씩 제안해 줘.

[15문항]
1단계 전략: 누가, 왜 쓰는 앱인가
1-1 첫 화면만 봐도 이 앱을 누가(교사, 학생 등), 어떤 수업 상황에서 쓰는지 바로 알 수 있다.
1-2 첫 화면 맨 위에 이 앱을 쓰면 무엇이 편해지는지(써야 하는 이유)가 한 문장으로 적혀 있다.
1-3 앱 이름 바로 옆이나 아래에 이 앱이 무슨 일을 하는 도구인지 풀어 쓴 짧은 설명(부제)이 붙어 있다.
2단계 범위: 무엇을 넣고 무엇을 뺄까
2-1 수업에 꼭 필요한 핵심 기능 1~2가지만 첫 화면에 나와 있고, 없어도 되는 부가 기능은 빼거나 접어 두기 버튼 안에 숨겨져 있다.
2-2 화면 안에 세 줄이 넘어가는 긴 설명글이 없고, 각 안내 문구가 두 줄 이내로 짧게 적혀 있다.
2-3 AI가 습관처럼 만들어 넣은 영어 꼬리표, 장식용 환영 인사, 뜻 없는 꾸밈 문구가 화면에서 모두 빠져 있다.
3단계 구조: 어떤 순서로 흘러가나
3-1 앱을 열자마자 사용자가 가장 먼저 해야 할 첫 단계(예: 파일 올리기, 모둠 고르기)가 첫 화면 한가운데에 바로 나온다.
3-2 다음 단계로 넘어갈 때 '학급 아이디'처럼 만든 사람만 아는 용어를 묻지 않고, 교실에서 쓰는 쉬운 말과 입력 예시를 함께 보여 준다.
3-3 처음 들어왔을 때 뜨는 사용법 안내(화면 둘러보기)에 '건너뛰기' 버튼이 있고, 한 번 닫으면 브라우저(로컬 저장소)에 기억해서 다시 뜨지 않는다.
4단계 뼈대: 무엇을 어디에 둘까
4-1 수업 중에 가장 자주 쓰는 핵심 기능 버튼이 보조 도구바 안에 섞여 있지 않고, 따로 떨어진 자리(예: 화면 위에 떠 있는 플로팅 버튼)에 놓여 있다.
4-2 한 화면 안에 스크롤 막대가 1개 이하로만 있고, 안쪽 상자에 또 다른 세로 스크롤이 겹쳐 생기지 않는다.
4-3 탭 메뉴를 바꾸거나 다음 단계 버튼을 누를 때 내용을 감싸는 바깥 상자(컨테이너)의 가로세로 크기가 들쭉날쭉 변하지 않고 고정되어 있다.
5단계 표면: 어떻게 보이나
5-1 본문 글자 크기가 16px 이상이고, 글자 색과 배경 색의 명도 대비(밝기 차이)가 4.5:1 이상이어서 흐릿하게 묻히는 글자가 없다.
5-2 손가락이나 마우스로 누르는 모든 버튼의 가로와 세로 크기가 각각 44px 이상이고, 화면 가로 폭을 320px로 줄여도 요소가 밖으로 잘리지 않는다.
5-3 한 화면에서 가장 먼저 눌러야 할 핵심 버튼 하나만 진한 강조 색으로 칠해져 있고, 나머지 보조 버튼은 연한 배경이나 테두리로만 표시되어 있다.