by
Jan 29. 2024
보이는 것을 맛있게 만드는 UI와 UX
프론트엔드를 구성하는 UX와 UI
와! 맛있어 보인다!
음식점에서 만나는 프론트엔드
오늘은 블로그에서 높은 평점을 받고 있는 파스타 음식점을 찾아 가보겠습니다. 일명 맛집 탐방입니다. 오늘의 장소는 홍대입니다. 연남동에서 뉴욕의 센트럴파크와 닮아서 연트럴파크라는 별명을 가지고 있는 숲길 끝자락에 도착하였습니다. 그리고 지도에서 위치를 찾다가 어느새 코 끝은 맛있는 냄새가 이끌리는 방향으로 발걸음을 인도합니다. 드디어 도착한 유명한 맛집! 길게 줄 선 사람들이 맛집임을 분명하게 합니다. 그리고 한 시간이 넘는 기다림 끝에 안내를 받고 자리에 앉았습니다. 가장 유명한 메뉴를 시키고 배 시계가 꼬르륵 소리가 나던 그때 기다리던 음식이 나왔습니다. 파스타 면위에 수북이 뿌려진 치즈 가루와 이름 모를 잎사귀가 데코레이션을 더하고 빨간 소스가 하트 모양으로 뿌려져 있습니다. 먹기도 전에 우린 이렇게 이렇게 외칩니다. "와 맛있어 보인다!" 사랑스러운 UI가 빛을 발하는 순간입니다.
그런데 아직 끝나지 않았습니다. 갑자기 종업원이 다가옵니다. 거대한 토치 라이터를 켜더니 그릇 주변에 불을 붙입니다. 그러자 거대한 불꽃이 일어납니다. 구경하던 중 한 명은 열심히 인스타에 올리기 위해 동영상을 촬영 중입니다. 한 10초 정도 이글이글 유지 되더니 이내 잠잠해집니다. 그리고 종업원은 이렇게 말합니다. "주방에서 손님의 자리까지 오는 시간 동안 파스타가 식을 수 있으니 좀 더 따뜻하게 드시라고 이렇게 불꽃쇼를 선보였습니다." 감동받은 일행들은 박수를 치며 따뜻하다 못해 뜨거워진 파스타를 한점 집어듭니다. 감동스러운 UX가 빛을 발하는 순간입니다.
분명 보인다는 시각을 뜻하는 단어입니다. 그런데 우린 맛있는 음식을 먹기도 전에 시각에 사로잡혀 그 맛을 눈으로 음미합니다. 속담에 이런 말도 있죠 "보기 좋은 떡이 먹기도 좋다" 그렇습니다. 역시 보이는 건 참 중요합니다. 물론 맛있게 생긴 음식을 한입 베어 먹고 나서는 평가가 달라질 수도 있습니다. 하지만 웬만큼 맛없는 음식이 아닌 이상 이미 사로잡힌 시각에 우린 좀 더 긍정적인 평가를 할 것입니다. 그것이 바로 보이는 것이 중요한 이유입니다. 그리고 식당에서 살짝 식은 음식을 먹으면 손님의 경험은 최악으로 치달을 수 있습니다. 손님에게 완벽한 파스타의 경험을 위해 불꽃쇼를 하는 정성으로 손님의 감성을 건드릴 수 있다면 정말 맛없는 음식이 아닌 이상 우린 그 음식점에 별 다섯 개의 리뷰를 선사할 것입니다. 이것이 바로바로 프론트엔드가 웹을 맛있게 만드는 비법입니다.
프론트엔드를 구성하는 UI와 UX
UI가 예쁘네요.
프론트엔드(Front End)를 구성하는 한 부분은 사용자의 인터페이스(UI)를 개발하는 분야를 말합니다. UI는 사용자가 컴퓨터 프로그램 또는 모바일 앱을 사용할 때 마주하는 디자인, 레이아웃 등 직접 눈으로 보이는 것을 뜻합니다. 좀 더 쉽게 설명드리자면 실제로 여러분의 모니터에 출력되는 그 부분을 말합니다. 만약 여러분이 이 글을 웹페이지에서 보고 있다면 프런트엔드의 UI로 제 글을 읽고 있는 셈이죠. 이처럼 UI는 프론트엔드에서 UI개발팀과 디자이너와 퍼블리셔가 개발한 디자인 페이지를 말합니다.
다시 한번 좀 더 쉽게 풀어 설명 해보겠습니다. UI는 바로 눈에 보이는 디자인적 요소입니다. 방문자가 여러분의 사이트에 접속했을 때 보이는 디자인들 즉 '글꼴', '색상', '레이아웃', '간격' 등등 보이는 모든 것을 말합니다. 맛있는 음식을 보았을 때 외치는 와 '맛있어 보인다!!'라고 외치는 그때의 심정을 만들기 위한 작업이라고 생각하시면 좀 더 쉽게 이해하실 수 있을 것입니다. 몇 가지 UI 요소를 알아보겠습니다.
3x3의 네모난 점이 정사각형으로 정렬된 이 모습 우리에게 너무나 익숙한 메뉴 아이콘입니다. 특히 애플리케이션에서는 단골로 등장하는 이미지입니다. 한국에서는 보통 '도시락 메뉴'라고 합니다. 하지만 전 세계적으로 이 UI 요소의 이름은 통칭 벤토 메뉴(Bento Menu)라고 부릅니다. UI 디자이너들은 음식 이름을 붙이는 걸 좋아한다고 합니다. 이 버튼의 사용법은 클릭 시 그리드 목록으로 메뉴가 나열됩니다. 아마도 처음 이 벤토 메뉴가 세상에 나왔을 적에는 생소했을지 모르나 지금의 이 UI의 요소는 스마트폰이나 웹사이트를 자주 접속하는 사람이라면 어린아이부터 어르신까지 어떤 사용법인지를 직감적으로 알고 사용하고 있습니다. 대표적인 UI 요소입니다.
이번에는 체크 박스입니다. 체크 표시가 되어있거나 되어있지 않은 두 가지 상태를 나타내는 작은 박스입니다. 체크가 되어 있으면 true입니다. 선택했다는 표시입니다. 반대로 체크를 해제하면 false 선택을 하지 않았다는 표시입니다. 쇼핑몰에서 장바구니에 담은 것 중 원하는 것을 구매할 때 한 번쯤은 이 체크박스를 사용했을 것입니다. 체크박스는 UI 요소 중에 가장 보편적인 요소 중 하나입니다. 만약 체크박스가 없었더라면 쇼핑몰에서는 장바구니에 담긴 물건을 모두 구매하거나 장바구니에서 삭제했어야 했지만 체크박스 덕분에 원하는 것만 선택할 수 있게 되었습니다.
UX가 참 편리하네요.
또 다른 프론트 엔드(Front End)를 구성하는 한 부분은 사용자 경험(UX)입니다. 앞서 UI라는 디자인으로 만들어진 아름다운 화면의 서비스를 사용하는 사용자가 겪는 경험과 감정 등을 말합니다. 하인즈 케첩의 예시를 통해 좀 더 쉽게 이해할 수 있습니다.
창업주 하인즈의 UX 아이디어는 대단합니다. 첫 번째로 케첩병을 투명한 유리로 만들었습니다. 이로써 소비자들은 내용물을 직접 확인할 수 있게 되었고 당시 가공 식품에 대한 소비자의 신뢰감이 없었기 때문에 투명한 병은 고객들에게 믿음을 줄 수 있게 되었습니다. 두 번째로 용기를 고무로 바꿔 남김없이 짜 먹을 수 있도록 사용성을 높였습니다. 더 이상 남은 케첩을 꺼내기 위해 유리병을 깨지 않아도 된 것입니다. 그리고 마지막으로는 병을 '거꾸로' 더 이상 짜지 않아도 항상 쉽게 마지막 케첩 한 방울까지 먹을 수 있게 만들었습니다. 이것이 바로 UX의 힘입니다. 앞서 설명한 파스타 집의 따뜻한 음식과 볼거리까지 제공한 불꽃쇼가 바로 UX를 이용한 예시입니다.
UX는 그렇다면 디자이너의 영역일까요? 프론트엔드 개발자의 영역일까요? UX는 서비스를 만드는 모든 직군에게 필요한 관점입니다. 그러므로 기획자와 디자이너 개발자 모두 사용자의 눈으로 불편함이 없는 서비스를 개발하는 것이 필요로 합니다. 그렇기 때문에 모든 직군이 가져야 할 영역입니다. 하지만 프론트엔드 개발자는 이 직군 중에서도 사용자와 가장 거리가 가까이에 있습니다. 그렇기 때문에 프론트 엔드 개발자는 사용자에게 훌륭한 경험을 제공하기 위해 준비되어야 합니다. 그렇다면 좀 더 쉬운 예시를 통해 프론트엔드 개발자가 어떤 UX 친화적 개발을 하는지 알아보겠습니다.
위에 화면은 구글 가입 시에 기본정보를 적는 페이지입니다. 해당 화면에서는 생년월일과 성별을 입력합니다. 여기서 저는 임의로 '1024'라는 연도를 기입했습니다. 그리고 다음을 클릭하려고 하니 이렇게 빨간색으로 경고가 표시됩니다. '유효한 날짜를 입력하세요.' 아마도 미라가 아닌 이상 1024년도에 태어난 사람 중에 구글을 사용할 수 있는 사용자는 없을 것입니다. 사용자는 분명 실수로 숫자를 입력했을 것입니다. 만약 이런 경고문을 코딩하지 않았더라면 방문자는 가입하지 못한 채 페이지 내에서 스스로 잘못을 깨달을 때까지 나갈 수 없을 것입니다. 그러면 구글을 사용하고 싶은 사용자에게는 아주 불편한 경험을 제공하게 되는 것입니다. 하지만 다행히 프런트엔드 개발자가 코딩한 '유효성 체크'는 사용자는 자신의 실수를 빠르게 알 수 있게 되고 좋은 사용자 경험을 가지게 될 것입니다. 실수를 잡아주는 이러한 코딩이 바로 UX 친화적인 예시입니다. 또 하나의 예시를 살펴보겠습니다.
