UI & WEB · 완전 초보자를 위한 AI 웹서비스 만들기

HTML로 화면의 뼈대를 만들고 CSS로 모양을 꾸미고 JavaScript로 버튼에 반응을 넣었다면, 이제 한 가지 질문이 남습니다. ‘그럼 화면을 어떻게 배치해야 사람들이 편하게 쓸 수 있을까?’ 바로 이 질문에서 UI가 시작됩니다.

UI는 User Interface의 줄임말입니다. 이름만 보면 어렵지만 뜻은 단순합니다. 사용자가 실제로 보고, 누르고, 입력하고, 선택하는 모든 화면 요소를 말합니다. 버튼, 메뉴, 검색창, 카드, 탭, 로그인창 같은 것들이 모두 UI에 들어갑니다.

MathGenix를 만들면서도 기능만 돌아간다고 끝이 아니었습니다. 문제를 만들 수는 있어도 어떤 버튼을 먼저 눌러야 하는지 모르거나, 입력창이 너무 많거나, 결과가 어디에 나타나는지 찾기 어렵다면 사용자는 금방 불편해집니다. 그래서 UI는 ‘예쁘게 만드는 일’보다 ‘헷갈리지 않게 만드는 일’에 더 가깝습니다.

오늘의 목표

  • UI가 무엇인지 아주 쉽게 이해합니다.
  • 예쁜 화면과 사용하기 쉬운 화면의 차이를 이해합니다.
  • 버튼, 메뉴, 입력창, 카드 같은 기본 UI 요소의 역할을 압니다.
  • MathGenix 같은 웹서비스에서 화면을 어떻게 단순하게 구성할지 생각해봅니다.
  • AI에게 ‘예쁘게 해줘’가 아니라 구체적으로 UI를 요청하는 방법을 익힙니다.

01. UI는 사용자가 만나는 ‘앞쪽 화면’입니다

웹서비스 안에는 눈에 보이지 않는 기능도 많습니다. 데이터베이스가 정보를 저장하고, 서버가 프로그램을 실행하고, API가 서로 데이터를 주고받습니다. 하지만 사용자는 이런 것을 직접 보지 않습니다. 사용자가 보는 것은 화면입니다.

그래서 UI를 쉽게 말하면 ‘사용자와 서비스가 만나는 접점’이라고 생각하면 됩니다. 사용자가 문제를 만들고 싶다면 문제 생성 버튼이 보여야 하고, 검색하고 싶다면 검색창이 보여야 합니다. 어디를 눌러야 할지 한눈에 알아볼 수 있어야 좋은 UI에 가까워집니다.

02. UI는 인테리어보다 안내판에 가깝습니다

UI를 처음 접하면 디자인부터 떠올리기 쉽습니다. 색상, 그림자, 둥근 버튼, 멋진 애니메이션 같은 것들입니다. 물론 보기 좋은 화면도 중요합니다. 하지만 초보자용 웹서비스에서는 그보다 먼저 ‘사용자가 길을 잃지 않는가?’를 봐야 합니다.

대형마트를 생각해보면 쉽습니다. 인테리어가 아무리 멋져도 계산대가 어디인지, 화장실이 어디인지, 원하는 상품이 어느 층에 있는지 알 수 없다면 불편합니다. 반대로 안내판이 분명하면 처음 방문한 사람도 쉽게 움직일 수 있습니다. UI도 똑같습니다.

그래서 UI를 설계할 때 가장 먼저 물어볼 질문은 이것입니다.

  • 이 화면에서 사용자가 가장 먼저 해야 할 일은 무엇인가?
  • 그 일을 하는 버튼이 바로 보이는가?
  • 꼭 필요하지 않은 메뉴가 너무 많지는 않은가?
  • 결과가 어디에 나타나는지 바로 알 수 있는가?

03. 초보자가 먼저 알아야 할 기본 UI 요소

버튼

사용자가 어떤 행동을 시작하게 하는 요소입니다. ‘문제 만들기’, ‘저장’, ‘로그인’, ‘다음’처럼 동작을 명확하게 적는 것이 좋습니다. ‘확인’처럼 뜻이 모호한 단어보다 ‘문제 생성하기’처럼 결과가 예상되는 표현이 초보자에게 더 친절합니다.

입력창

사용자가 글자나 숫자를 넣는 곳입니다. 단순히 빈 칸만 보여주기보다 ‘검색어 입력’, ‘학년 선택’처럼 무엇을 넣는 곳인지 바로 알 수 있게 하는 것이 좋습니다.

메뉴

서비스 안의 여러 공간으로 이동하는 길입니다. 메뉴가 너무 많으면 처음 온 사용자는 오히려 더 헷갈릴 수 있습니다. 자주 쓰는 기능을 먼저 보여주고, 덜 중요한 기능은 안쪽으로 정리하는 방식이 좋습니다.

카드

관련 정보를 하나의 묶음처럼 보여주는 형태입니다. 글 목록, 문제 목록, 상품 목록에서 자주 볼 수 있습니다. 제목, 짧은 설명, 버튼을 한 덩어리로 보여줄 때 이해하기 쉽습니다.

탭

한 화면 안에서 관련 내용을 바꿔가며 보여주는 방식입니다. 예를 들어 ‘문제 / 풀이 / 정답’을 각각 탭으로 나누면 화면을 길게 늘이지 않고도 내용을 구분할 수 있습니다.

04. MathGenix로 생각해보면 UI가 더 쉽게 보입니다

MathGenix에서 사용자가 하고 싶은 핵심 행동을 아주 단순하게 생각하면 ‘원하는 조건을 선택하고 문제를 만든다’입니다. 그렇다면 화면도 이 흐름을 방해하지 않게 구성해야 합니다.

  1. 먼저 학년이나 단원을 선택합니다.
  2. 필요한 조건을 정합니다.
  3. 문제 생성 버튼을 누릅니다.
  4. 생성 중이라는 상태를 확인합니다.
  5. 완성된 문제와 풀이를 확인합니다.
  6. 필요하면 저장하거나 다시 생성합니다.

이 순서가 화면에서도 자연스럽게 이어지면 사용자는 설명서를 읽지 않아도 어느 정도 서비스를 사용할 수 있습니다. 반대로 버튼과 메뉴의 위치가 뒤섞여 있으면 기능이 좋아도 사용하기 어렵습니다.

05. 기능이 많아질수록 화면을 더 단순하게 해야 합니다

서비스를 만들다 보면 자꾸 기능을 추가하고 싶어집니다. 검색, 저장, 필터, 즐겨찾기, 내 보관함, 설정, 통계 등 기능이 늘어날수록 화면도 복잡해집니다.

초보자 입장에서 중요한 원칙은 ‘기능을 다 보여주는 것이 친절한 것이 아니다’라는 점입니다. 처음 온 사용자가 가장 먼저 해야 할 일을 우선 보여주고, 나머지는 필요할 때 찾을 수 있도록 정리하는 편이 더 좋습니다.

이 원칙은 WordPress 블로그를 만들 때도 똑같이 적용할 수 있습니다. 첫 화면에 메뉴를 너무 많이 넣거나, 사이드바에 모든 기능을 쌓아두기보다 방문자가 먼저 읽어야 할 글과 카테고리를 분명하게 보여주는 것이 더 중요합니다.

06. 모바일 화면은 나중 문제가 아닙니다

PC에서 보기 좋은 화면이 스마트폰에서는 불편할 수 있습니다. 화면 폭이 좁기 때문에 메뉴가 잘리거나 버튼이 너무 작아지거나, 글자가 여러 줄로 겹칠 수 있습니다.

그래서 화면을 만들 때는 ‘PC에서 완성한 뒤 모바일을 고친다’기보다, 중간중간 스마트폰 크기로도 확인하는 습관이 좋습니다. 특히 버튼은 손가락으로 누르기 충분한지, 글자가 너무 작지 않은지, 가로 스크롤이 생기지 않는지를 확인해야 합니다.

07. AI에게 UI를 요청할 때 ‘예쁘게 해줘’라고만 하지 마세요

AI에게 ‘화면 좀 예쁘게 만들어줘’라고 하면 그럴듯한 결과는 나올 수 있습니다. 하지만 내가 원하는 사용 흐름과는 다를 수 있습니다. UI 요청은 디자인 취향보다 사용 목적을 먼저 알려주는 것이 좋습니다.

예를 들어 이렇게 요청할 수 있습니다.

수학 문제 생성 웹서비스의 첫 화면을 만들려고 합니다. 사용자는 개발자가 아니라 교사와 학생입니다. 학년 선택 → 단원 선택 → 문제 생성 버튼 순서가 한눈에 보이게 구성해주세요. 처음 방문한 사람도 설명 없이 사용할 수 있어야 하고, 모바일에서도 버튼이 쉽게 눌리도록 해주세요.

이렇게 요청하면 AI가 단순히 색상만 바꾸는 것이 아니라 사용 흐름을 고려한 화면을 제안하기 쉬워집니다.

08. 화면 캡처를 AI에게 보여주는 방법

이미 만든 화면이 있다면 캡처해서 AI에게 보여주는 방법도 매우 유용합니다. 이때 ‘이거 어때?’라고만 묻기보다 초보 사용자 관점에서 구체적으로 봐달라고 하는 것이 좋습니다.

  • 처음 방문한 사람이 가장 먼저 눌러야 할 버튼이 바로 보이는지 봐줘.
  • 불필요하게 복잡한 부분이 있다면 줄여줘.
  • 모바일에서 문제가 될 만한 부분을 찾아줘.
  • 전문용어 때문에 초보자가 이해하기 어려운 문구가 있는지 봐줘.
  • 버튼 이름을 더 쉬운 표현으로 바꿀 수 있는지 제안해줘.

이 방식은 UI 전문가가 아니어도 화면을 하나씩 개선해가는 데 도움이 됩니다. 다만 로그인 정보, 이메일 주소, API 키, 서버 주소 같은 민감한 정보가 화면에 보인다면 캡처 전에 가리는 것이 좋습니다.

09. 초보자가 UI를 만들 때 자주 하는 실수

  • 기능이 많아 보이면 좋아 보인다고 생각해 첫 화면에 모든 메뉴를 넣는 것
  • 버튼 이름을 ‘확인’, ‘실행’처럼 너무 추상적으로 쓰는 것
  • 색상과 애니메이션에 집중하고 사용 순서를 놓치는 것
  • PC 화면만 보고 모바일 확인을 하지 않는 것
  • 사용자가 지금 어디에 있는지 알 수 없는 구조를 만드는 것
  • 처음 보는 전문용어를 설명 없이 화면에 그대로 노출하는 것

10. 화면을 완성했다고 생각되면 이것만 확인하세요

UI를 처음 만드는 사람이라면 복잡한 디자인 평가표보다 아래 다섯 가지부터 확인하면 됩니다.

  • 처음 들어온 사람이 무엇을 해야 하는지 5초 안에 알 수 있는가?
  • 가장 중요한 버튼이 눈에 잘 보이는가?
  • 버튼 이름만 보고 어떤 일이 일어날지 예상할 수 있는가?
  • 스마트폰에서도 글자와 버튼이 잘 보이는가?
  • 없어도 되는 메뉴나 설명을 줄일 수 있는가?

SUMMARY

  • UI는 사용자가 실제로 보고 누르고 입력하는 화면을 뜻합니다.
  • 좋은 UI는 단순히 예쁜 화면보다 사용자가 길을 잃지 않는 화면에 가깝습니다.
  • 버튼, 입력창, 메뉴, 카드, 탭은 각각 사용자의 행동을 돕는 역할을 합니다.
  • 기능이 늘어날수록 처음 사용자에게 꼭 필요한 것부터 보여주는 것이 중요합니다.
  • AI에게 UI를 요청할 때는 색상보다 ‘누가, 무엇을, 어떤 순서로 사용하는지’를 먼저 설명합니다.

ONE LINE TAKEAWAY

좋은 UI는 멋있어 보이는 화면이 아니라, 처음 온 사람도 어디를 눌러야 할지 바로 알 수 있는 화면입니다.

NEXT IN SERIES

STEP 012 — WordPress란? 코딩을 몰라도 블로그를 운영할 수 있는 이유

참고 자료

  • MDN Web Docs — Web development learning resources
  • W3C Web Accessibility Initiative — 사용자 중심 웹 접근성 기본 원칙
  • Nielsen Norman Group — User Interface Design 관련 기초 자료