likeornament 님의 블로그
교실에서 찾은 불편함, 내 프로젝트 UI는 괜찮을까? 본문
본인은 2025년 3월부터 7월까지 중학생들을 대상으로 스크래치와 아두이노를 활용한 코딩 수업을 진행했다.
그 과정에서 학생들이 프로그램의 UI를 헷갈려 하거나 불편해하는 모습을 자주 볼 수 있었다.
이 경험을 통해 ‘내 프로젝트에 이런 인사이트를 적용하면 사용자들이 더 좋은 경험을 할 수 있겠다’는 생각이 들었고,
그에 따라 점검하거나 개선하게 된 UI 사례들을 정리해보려 한다.
✨ 사례 1 – 한 페이지에 너무 많은 요소가 있을 때의 직관성 문제
스크래치 프로그램을 보면 하나의 화면 안에 너무 많은 요소가 빽빽하게 배치되어 있다.
그래서 학생들에게 “이 버튼을 눌러봐”라고 알려줘도, 다음 번에는 같은 기능을 쉽게 찾지 못하는 경우가 많았다.
즉, 한눈에 기능이 들어오지 않는, 직관성이 떨어지는 구조였다.
💡내가 한 생각
한 페이지에 요소가 많아 직관성이 떨어진다면, 페이지를 분리해서 주요 기능을 눈에 띄게 하는 것이 낫겠다.
🛠️ 점검 과정
그 당시 내가 작업하던 프로젝트의 메인 페이지에는
- 상단에 주요 학습 기능 4개
- 중간에 "이번 주 활동"
- 최하단에 "최근 활동"
이렇게 세 가지 요소가 한 화면에 모두 들어 있었다.
문제는 최하단의 “최근 활동” 컴포넌트였다.
스크롤을 최하단까지 내려야 보여서 한 눈에 들어오지 않았고,
“더보기” 버튼을 누르면 복습 페이지로 이동하게 만들었는데,
이미 하단 네비게이션 바에도 복습 페이지가 있어서 중복되는 기능이 되어버렸다.
그래서 “최근 활동” 컴포넌트를 과감히 복습 페이지로 옮겨 그대로 재사용했다.
그 결과,
- 메인 페이지에는 주요 기능 4개 + 이번 주 활동만 남아 한눈에 들어오게 되었고,
- 복습·커뮤니티·랭킹과 같은 후순위 기능은 네비게이션 바로 분리해 접근하도록 개선했다.
데스크탑 화면에서는 단순히 화면이 넓다고 해서 요소를 더 추가하지 않았다.
태블릿 화면 비율까지만 요소 크기를 늘리고, 그 이상은 고정했다.
남는 공간은 좌우 여백으로 처리해, 오히려 중앙의 주요 기능에 집중할 수 있도록 했다.
✅ 이러한 방법으로 한 페이지에 너무 많은 요소가 있을 때 발생하는 직관성 문제를 해결했다.
✨ 사례 2 – 색상과 모양, 글씨 크기를 통한 구분성 확보
1. 좌측 메뉴 영역
사진의 좌측 메뉴(동작, 형태, 소리, 이벤트 등)를 보면, 모두 동그라미 모양에 글씨 크기도 작다.
그래서 학생들은 메뉴를 구분할 때 색상에만 의존하게 된다.
실제 수업에서도 “동작 눌러봐”라는 설명보다 “파란색 눌러봐”라는 설명을 훨씬 쉽게 이해했다.
2. 우측 코드 블록 영역
하지만 오른쪽 코드 블록들을 보면, 같은 색 안에 비슷한 모양과 동일한 글씨 크기의 요소들이 나열되어 있다.
이 때문에 학생들이 블록들 사이의 차이를 구분하는 데 어려움을 겪었다.
💡내가 한 생각
색상은 기본적인 구분에 효과적이지만,
모양과 글씨 크기의 차이를 함께 줘야 사용자가 더 직관적으로 인식할 수 있다.
🛠️ 점검 과정
내 프로젝트의 메인 페이지에는 네 가지 주요 기능(개발 용어, 개발/CS 지식, 모의 PR, 모의 면접)이 있다.
이 기능들은 모두 개발 관련 학습 기능이어서 자칫하면 서로 혼동될 수 있다고 생각했다.
이를 방지하기 위해 각 기능마다 상징 색 + 서로 다른 모양의 아이콘을 배치했다.
또한 기능 이름은 크고 진한 글씨로 강조하고, 설명 문구는 작고 연한 색 글씨로 처리해 위계 차이를 주었다.
→ 결과적으로 사용자는 색상·아이콘·글씨 크기라는 세 가지 구분 요소를 통해 기능을 쉽게 구별할 수 있게 되었다.
추가로, 학습을 이어가기 위해 각 기능 페이지에 들어가면 해당 기능의 테마색을 그대로 적용했다.
- 개발 용어: 초록색
- 개발/CS 지식: 파란색
- 모의 PR: 보라색
- 모의 면접: 주황색
→ 색상만으로도 사용자가 "지금 어떤 학습을 하고 있구나”라는 점을 직관적으로 인식하고 구분할 수 있다.
✅ 이 과정을 통해, 내가 설계한 UI가 색상·아이콘·글씨 위계를 적절히 활용한 사용자들에게 효과적인 UI임을 확인할 수 있었다.
✨ 사례 3 – 아이콘만으로는 부족할 때 텍스트와 툴팁 활용하기
스크래치의 우측 하단에는 스프라이트를 추가하는 버튼이 있다.
하지만 버튼 아이콘이 고양이 모양이라, 학생들이 이게 스프라이트 추가 버튼이라는 것을 잘 알아차리지 못했다.
추가로, 아두이노의 좌측 영역에도 여러 아이콘들이 배치되어 있는데
학생들이 각각의 아이콘이 어떤 기능을 하는 버튼인지 쉽게 파악하지 못했다.
즉, 아이콘만으로는 기능을 충분히 전달하지 못하는 경우가 있었다.
💡 내가 한 생각
버튼은 직관적으로 이해할 수 있어야 한다.
공간이 충분하다면 텍스트를 함께 넣는 것이 좋다.
공간이 부족하다면 직관적인 아이콘을 선택하거나 툴팁을 제공해야 한다
🛠️ 점검 과정
내 프로젝트의 하단 네비게이션 바는 공간 여백이 있었기 때문에, 아이콘 아래에 텍스트를 함께 배치했다.
→ 아이콘만 있는 경우보다 기능을 한눈에 이해할 수 있게 되었다.
❗ 이와 관련해,
인스타그램, X 같은 글로벌 서비스들의 네비게이션 바에는 텍스트가 없는 경우가 많다.
이는 각 나라의 언어로 텍스트를 번역해 넣어야 하기 때문에, 아이콘만으로도 의미를 전달하려는 선택이라고 볼 수 있다.
반면 당근마켓, 번개장터 같은 국내 사용자 중심 서비스들은 여러 나라 언어로 제공할 필요가 없으므로 아이콘과 텍스트를 함께 제공한다.
→ 따라서 텍스트를 넣는 것이 사실상 기본값이자 더 나은 방법이라고 판단했으며, 이런 맥락에서도 내 프로젝트에서는 네비게이션 바에 아이콘+텍스트 병행을 적용했다.
또, 모의 PR 페이지에서는 우측 상단의 변경된 파일 보기 아이콘이 직관적으로 이해되지 않을 수 있었다.
하지만 이 경우 텍스트를 추가한다면 수학정 정렬과 시각정 균형이 깨지게 된다.
(이에 관련한 내용은 아래 글에서 확인 가능하다.)
https://likeornament.tistory.com/27
정확한 가운데와 눈으로 보는 가운데, 어느 쪽을 선택할까?
7월 회고록에 적었던 것처럼 MSW를 사용해 배포를 완료하고,프로젝트 마무리를 하던 중 PR 작성 페이지에서 한 가지 UI 고민이 생겼다. 상단의 step(진행 단계) 표시를 가운데 정렬할 때, 수학적으로
likeornament.tistory.com
→ 그래서 아이콘 위에 마우스를 올리면 설명이 뜨는 툴팁을 제공했다.
✅ 이러한 접근을 통해, 아이콘만으로 직관성이 떨어지는 UI 요소들을 보완하여 사용자들이 기능을 쉽게 이해하고 사용할 수 있도록 문제를 해결할 수 있었다.
✨ 사례 4 – 처음 접속한 사용자를 위한 안내
스크래치에서 Crab, Bear와 같은 스프라이트를 추가하면 각각의 스프라이트마다 코드를 작성할 수 있다.
하지만 별도의 안내문이 없으니 학생들이 이 기능을 어떻게 활용해야 하는지 잘 이해하지 못했다.
💡내가 한 생각
사용자들이 서비스를 처음 접속했을 때 혼란을 줄이려면,
첫 화면에서 기능 안내와 사용 방법을 함께 보여주는 것이 필요하다.
🛠️ 점검 과정
기존 프로젝트에서는 접속하면 가장 먼저 사진과 같은 화면이 보였다.
하지만 각 기능에 대한 내용이 텍스트로만 간단히 나열되어 있어서,
사용자가 회원가입 후 실제 기능을 이용하려고 하면 헷갈릴 수 있겠다고 생각했다.
그래서 각 기능마다 랜딩 페이지의 섹션을 따로 두고, 기능 화면 이미지 + 큰 텍스트의 설명 문구 + 해당 기능 아이콘을 함께 배치했다.
- 개발 단어 학습은 “스펠링·발음·예문·퀴즈까지 한 번에.”라는 문구와 함께 실제 학습 화면 이미지를 노출
- CS 지식 학습은 “이해-적용-검증의 3스텝”이라는 큰 텍스트와 함께 예시 화면을 보여줌
- 모의 PR은 “실제 협업처럼 PR을 연습하세요”라는 헤드라인과 기능 화면 이미지
- 모의 면접은 “AI와 실전 같은 면접 연습”이라는 소개와 함께 인터페이스 화면
✅ 결과적으로, 초기 진입 시 안내 부족으로 생길 수 있는 혼란을 줄이고, 처음 접속한 사용자도 쉽게 기능을 파악할 수 있는 랜딩 페이지 UI를 설계할 수 있었다.
이번 글에서는 중학생 수업 경험을 통해 관찰했던 불편한 UI 사례를 내 프로젝트에 비추어 살펴보았다.
그 과정에서 내가 만든 UI가 잘 설계된 부분도 있었고, 더 보완할 수 있는 점도 발견할 수 있었다.
결국 중요한 것은 기능 자체보다 사용자가 얼마나 직관적으로 이해하고 활용할 수 있는가 하는 점이라는 것을 다시 한번 확인했다.