안녕하세요! IT에 관심 많은 블로그 주인장 빈짱입니다.
혹시 “나만의 앱을 한번 만들어볼까?” 하는 생각해 보신 적 있으신가요? 요즘은 코딩을 전혀 몰라도 앱을 만들 수 있는 시대라고 하는데, 막상 시작하려고 보면 외계어 같은 용어들 때문에 금방 포기하게 되곤 하죠.
그래서 새로운 시리즈를 시작합니다!
바로 <앱 만들기, 레고(LEGO) 블록 조립과 똑같아요!> 시리즈입니다.
이 시리즈에서는 앱을 만드는 데 필요한 모든 어려운 용어들을, 우리에게 친숙한 ‘레고 블록 조립’에 비유해서 세상에서 가장 쉽게 설명해 드릴 거예요. IT에 이제 막 관심을 갖게 된 학생분 들, 새로운 도전을 즐기시는 우리 시니어분, 그리고 개발 용어라면 머리부터 아파오는 모든 분을 위한 글입니다.
오늘은 그 대망의 첫 시간으로, 앱의 ‘첫인상’을 결정하는 가장 중요하고 기본적인 블록, UI와 UX에 대해 알아보겠습니다. 자, 그럼 함께 조립을 시작해볼까요?
UI (User Interface) | 우리 레고 작품의 ‘겉모습’
UI는 사용자 인터페이스(User Interface)의 줄임말이에요. 말이 어렵죠? 그냥 레고 작품의 겉모습이라고 생각하면 아주 쉬워요.
우리가 멋진 레고 자동차를 만든다고 상상해볼까요?
- 자동차의 색깔은 빨간색으로 할까, 파란색으로 할까?
- 바퀴는 크고 튼튼한 블록으로 만들까?
- 헤드라이트는 동그란 블록, 네모난 블록 중 뭘로 붙일까?
이처럼 사용자의 눈에 보이는 모든 디자인이 바로 UI입니다. 앱으로 가져와 볼까요?
- 버튼의 모양과 색깔
- 글씨체와 글자 크기
- 사진이나 그림의 배치
- 전체적인 색감과 디자인
한마디로 앱을 딱 켰을 때 “와, 예쁘다!”, “깔끔하네!” 라는 느낌을 주는 모든 시각적인 요소가 UI인 셈이죠. 멋진 외관의 레고 자동차가 아이들의 눈길을 사로잡듯, 좋은 UI는 사용자가 앱을 써보고 싶게 만드는 첫인상이랍니다.
UX (User Experience) | 레고 작품을 가지고 ‘노는 재미’
UX는 사용자 경험(User Experience)의 줄임말입니다. 이건 레고 작품을 가지고 노는 즐거움과 편리함이라고 생각하면 돼요.
자, 우리가 아까 만든 멋진 빨간색 레고 자동차(좋은 UI)가 있어요. 이제 그걸 가지고 놀아볼 시간이에요.
- 자동차 문은 쉽게 잘 열리나요?
- 운전석에 레고 피규어는 잘 앉혀지나요?
- 바퀴를 굴렸을 때 뻑뻑하지 않고 매끄럽게 잘 굴러가나요?
- 조금 가지고 놀았더니 부품이 자꾸 후두둑 떨어지진 않나요?
아무리 겉모습이 멋져도, 막상 가지고 놀기 불편하고 재미없으면 금방 실증 나겠죠? 그게 바로 UX입니다. 앱에서의 UX는 이런 것들이에요.
- 로그인 버튼을 찾기 쉬운가?
- 글씨가 너무 작아서 읽기 어렵진 않은가?
- 회원가입 절차가 너무 복잡하고 귀찮진 않은가?
- 앱의 반응 속도가 빨라서 답답하지 않은가?
즉, 사용자가 앱을 이용하면서 느끼는 “아, 편리하다!”, “쓰기 쉽네!”, “재미있다!” 와 같은 모든 경험과 감정이 UX입니다. 좋은 UX는 사용자가 앱을 계속해서 사용하게 만드는 핵심이죠.
UI와 UX, 환상의 짝꿍!
이제 감이 오시나요? UI는 ‘보이는 것’, UX는 ‘느끼는 것’ 입니다. 이 둘은 절대 떨어질 수 없는 환상의 짝꿍이에요.
나쁜 예시: 디자인은 정말 역대급으로 예쁜데(UI👍), 회원가입을 하려면 10단계를 거쳐야 하는 앱(UX👎). 좋은 예시: 디자인도 깔끔하고 예쁜데(UI👍), 단 세 번의 터치만으로 원하는 물건을 살 수 있는 앱(UX👍).
결국 좋은 앱이란, 레고 작품처럼 겉모습도 멋지고(좋은 UI), 가지고 놀기도 즐거운(좋은 UX) 경험을 선물하는 것이랍니다.
어떠셨나요? 어렵게만 느껴졌던 UI, UX라는 용어가 이제 조금은 친숙하게 느껴지시나요?
다음 시간에는 앱의 보이지 않는 곳을 탐험해 볼 거예요. 우리가 만든 레고 작품을 24시간 내내 작동시켜주는 마법 상자(서버)와 중요한 부품들을 정리해두는 부품 서랍장(DB)에 대해 알아보겠습니다.
<앱 만들기, 레고 블록 조립과 똑같아요!> 시리즈에 계속 관심 가져주세요!