예쁜게 좋은 사용자: 심미성과 사용성 사이의 밀당
[UX] 예쁜데 어려운 GUI vs 쉬운데 못생긴 GUI
'사람들은 예쁜 제품을 더 쉽게 용서한다.'
– 도널드 노먼 (Aesthetic-Usability Effect)
심미성은 제품의 첫인상을 결정짓는 강력한 요소입니다. 다만, 단순히 예쁜 디자인이 '좋은' 디자인이 되는 것은 아닙니다. 심미성이 되려 사용성을 해치기도, 반대로 과도한 기능성이 디자인의 매력을 떨어뜨리는 경우도 있거든요. 그렇다면 우리는 어떤 디자인을 추구해야 할까요? 이번 글에서는 심미성과 사용성 사이에서 균형을 잘 맞춘 사례를 분석하고, 아름다우면서도 유용한 UI를 설계하는 방법을 탐구합니다.
예쁘면 잘 작동할 것처럼 보인다.
사용자는 미적으로 우수한 제품을 더 직관적이고, 신뢰할 수 있다고 인식합니다. 이를 심미적 사용성 효과라 부르며, 아름다운 제품은 약간의 사용성 저하가 있더라도 크게 문제 삼지 않는 경향을 보여요.
발뮤다BALMUDA 토스터기발뮤다 토스터기가 바로 심미적 사용성 효과를 본 대표적인 제품입니다. 사용성 측면에서 (1)큰 가로 부피: 여느 토스터기와 다르게 주방에서 많은 면적을 차지함, (2)낮은 높이: 빵 윗부분이 잘 타므로 항상 주의해야 한다는 불편함이 제기됐음에도 불구하고 미니멀하고 세련된 디자인 덕분에 엄청난 판매량을 기록했죠. 관련 리뷰들이 ‘예쁘다. 그것만으로도 충분히 살 가치가 있다’ 입을 모아 이야기하는 것을 보면, 제품의 아름다운 디자인이 기능적 결함을 상쇄하며 소비자들을 충분히 만족시켰음을 알 수 있습니다.
하지만 과유불급이라, 뭐든 하나에만 치우쳐지면 문제가 생기는 법. 심미성과 기능성 중 하나만 과하게 고려될 시 아래와 같은 문제가 발생합니다.
망한 밸런스(1) 예쁘기만 한 제품:
과잉 디자인은 사용성을 방해한다.
아름다운 디자인은 사소한 사용성 문제를 해결하지만, 치명적인 문제는 해결할 수 없습니다. 사용 흐름을 전혀 고려하지 않은 플로우를 설계하거나, 과도한 인터랙션과 애니메이션으로 UX를 복잡하게 만든다면 디자인의 본질적인 역할인 '더 나은 경험을 제공하고, 사용자의 문제를 해결한다'를 수행하지 못하는 셈이니까요.
지금은 UI가 바뀌었네요. 처음 업데이트 당시 버전입니다.이전 보수적인 사용자 글에서도 다뤘었던 [카카오웹툰 GUI_구버전]을 들어보죠. 화려한 스플래쉬 스크린부터 로고의 그래픽적 형태를 적용한 썸네일, 유려한 애니메이션, 어떻게 써야 할지 감도 안 잡혔던 작품 탐색 페이지까지. 당시 동료들과 '디자이너가 한을 풀었네', '잡혀간 디자이너 과로사 한 거 아니냐'는 이야기를 나눴을 정도로 디자인 자체만 놓고 보면 기존 웹툰 앱들과는 차원이 다른 퀄리티입니다.
하지만 사용자는 차가웠다.하지만 필요 이상의 인터랙션과 복잡한 UI, 직관적이지 않은 플로우는 오히려 사용자를 피로하게 만들었고, 핵심 테스크인 '작품 보기' 경험을 해쳤습니다. 이는 웹툰 서비스가 본질적으로 보장해야 하는 경험으로, [다양한 작품을 쉽게 찾는다 / 선택한 작품은 몰입하여 편하게 읽을 수 있도록 한다]를 제공하지 못한, 심미성이 사용성보다 우선된 사례였지요.
이뿐만 일까요? 제작 과정에서 진행하는 UT(User Test): 사용성 테스트를 방해하기도 합니다. 아름다움은 그 자체로 강력한 설득력을 가지기 때문에, 사용자의 판단을 흐리게 만듭니다. 따라서 인터페이스가 사용하기 편리한지 알아보기 위해 진행한 테스트임에도 <기능성 판단>이 아닌 <심미적 감상>을 남기게 만들어 좋지 않은 UX를 '좋아보인다고' 판단해 버리는 오류가 발생할 수 있습니다.
좋게 들리지만, 우리에게 필요한 피드백이 아닐 수 있습니다.- 시각적인 인터페이스에 매료된 사용자는 기능에 대한 구체적인 피드백 대신 감상을 남긴다.
"메인 화면의 이미지 퀄리티가 좋으니 전문적이어 보여요."
"인터랙션이 재밌어서 흥미로워요."
망한 밸런스(2) 기능적이기만 한 제품:
못생긴 제품을 매일 쓰고 싶은가?
반대로 기능에만 초점이 맞춰진 서비스는 제품의 매력을 떨어뜨리고 초기 사용자 유입을 어렵게 만듭니다. 설령 사용자가 이미 이용하고 있더라도, 더 나은 서비스가 출시되면 중간에 이탈해 버릴 확률이 높아요.
앱스토어나 플레이스토어에서 필요한 앱을 검색해 본 경험이 다들 있을텐데요. 자, 오늘은 '일기' 앱을 찾아본다 가정해 봅시다. 아마 검색 결과로 비슷한 기능을 제공하는 수많은 앱들이 우수수 펼쳐질테죠. 그렇다면 여러분은 여기서 어떤 기준으로 다운로드할 앱을 선택하실 건가요?
기능은 편리해 보이지만 인터페이스가 복잡하고 투박한 앱, 적당한 기능을 갖추면서도 보기 좋은 앱 중 아마 후자를 선택하리라 예상합니다. 특히 복잡해 보이는 UI는 '사용하기 어렵고 배워야 할 기능이 많을 같다'는 인상을 주기 때문에 다운로드를 주저하게 만들었을 거고요.
그래서 균형이 중요하다는 말씀.
디자인의 궁극적인 목표란 사용자를 유입시키고, 이탈하지 않게 만드는 것. 그리고 이를 위해서는 아름다우면서도 편리한 경험이 필요한 법. 지금부터는 이 균형을 맞추는 5가지의 디자인 방법을 실제 서비스 사례를 바탕으로 알아봅시다.
균형을 맞추는 디자인, 5가지 원칙
1️⃣ 사용자 흐름을 방해하지 않는 UX 원칙 준수
기본적인 UX 원칙(가독성, 일관성 등)을 준수한다. 컬러대비, 적절한 여백과 폰트 크기 조절은 기본이다.
사용자의 주된 목표를 먼저 고려한 후, 그에 맞는 플로우를 설계하고 UI 요소를 배치한다.
2️⃣ 직관적이고 가벼운 인터랙션 설계
감각적인 애니메이션과 마이크로인터랙션은 사용자 경험을 향상시키지만, 과도하면 방해요소가 된다.
클릭했을 때 제공되는 피드백이 필요 이상으로 디자인되어 있다면 제거한다.
모든 인터랙션은 '이 효과가 꼭 필요한가?'라는 질문을 던지며 필터링한다.
3️⃣ 의미 있는 애니메이션과 비주얼 임팩트 활용
UI가 비주얼에 잡아먹히면 안된다. GUI는 본질적으로 사용자의 이해를 도와야한다.
피드백, 전환, 중요 정보 강조 등의 역할이 잘 수행되도록 디자인한다.
애니메이션의 속도와 리듬을 디테일하게 조절하며 사용성을 높인다.
4️⃣ 첫인상을 결정하는 단계(온보딩, 스플래쉬)에서는 심미성 적극 활용
스플래쉬, 온보딩, 랜딩 페이지에서는 브랜드 아이덴티티를 강조할 수 있다.
하지만 해당 과정이 너무 길어지면 사용자가 피로감을 느낄 수 있음을 고려한다.
5️⃣ 익숙한 패턴을 유지하면서도 차별화된 경험 제공
기존 사용 패턴을 따르되, 작은 디테일에서 차별화를 두는 전략이 효과적이다.
네비게이션, 버튼 배치, 카드 UI등 기본적인 UX/UI 패턴 속에서 브랜드 특성을 살리는 방법을 고민한다.
자, 지금부터는 최근 제가 심미성과 기능성의 균형이 잘 잡혔다고 느낀 인터페이스들인데요, 각각의 디자인을 살펴보며 앞서 소개한 5가지 UX 전략이 어떻게 적용되는지 확인해 봅시다.
❶ 에어비앤비
최근 혼자 여행 좀 해볼 목적으로 아고다와 에어비앤비를 오가며 숙소를 찾았습니다. 두 서비스가 워낙 극단적으로 다른 UX/UI 접근법을 취하고 있다 보니 에어비앤비의 직관적이면서도 감각적인 인터페이스가 눈에 띄었어요.
하나만 비교해봐도 아주 다릅니다 그려.예를 들어 '인기 숙소'를 표현하는 방식 하나만 봐도 접근 방식이 매우 다르죠. 아고다는 [다양한 색상을 활용한 텍스트] 위주로 정보를 전달하는 반면 에어비앤비는 [토스트 팝업과 아이콘 모션]을 활용한 인터랙션으로 사용자의 시선을 집중시킵니다. 앞에 다이아몬드 아이콘이 움직이면서 자연스럽게 에어비앤비의 포인트 칼라가 텍스트에 입혀지는데, 아주 깔끔하고 부드러웠어요.
<에어비앤비> 예약 과정 UI에어비앤비 UI의 특징
잔잔한 색감과 큼직한 UI로 안정감을 제공함.
부드럽게 전환되는 애니메이션은 전체 플로우를 자연스럽게 잇고 차근차근 따라갈 수 있게 도움.
간결한 정보는 피로도를 낮추고 중요한 결정(예약 및 결제)에 온전히 집중할 수 있도록 유도함.
위와 같은 인터페이스는 예약 과정에서 '좋은 숙소를 빠르게 찾아야 하며, 실수 없이 결제를 진행해야 한다.'는 부담과 압박을 느끼는 사용자에게 심리적 안정감을 제공합니다. 즉, 심미성과 사용성의 균형이 잘 맞춰진 케이스인 거죠.
❷ 독서타임
다음은 독서타임이라는 독서 기록 서비스입니다. 다크 모드와 그래픽이 강조되는 레이아웃 등 일반적인 독서 앱과는 차별화된 시각적 접근을 보였는데, 디자인적 요소가 강하다고 해서 사용성이 떨어지지는 않덥니다. 그래서 두 달째 요긴하게 쓰고 있어요.
<독서타임>의 전반 플로우 및 UI독서타임 UI의 특징
필요한 기능만 간결히 유지, 핵심 기능에만 비주얼 임팩트를 적용함.(책이 쌓이는 듯한 메인 그래픽 및 애니메이션을 스플래쉬 스크린과 홈 화면에서만 사용)
심미성이 강화되었으나, 조작 방법이 직관적이고 플로우가 단순해 사용이 어렵지 않고 피로도가 낮음.
주요 기능을 메인 화면 전반(80%이상 차지)에 배치하는 등 다소 과감한 UI를 설계했지만, 기능의 ‘중요도’에 따라 레이아웃을 전략적으로 분배한 시도로 보여짐.
둘은 무엇이 다를까?앞선 카카오웹툰 UI와 비교해 보죠. 독서타임과 카카오웹툰은 비슷한 시각적 접근 방법을 취하지만, 결정적인 차이가 있습니다. 카카오웹툰은 과도한 시각적 효과가 웹툰을 감상하는 흐름을 방해했던 반면, 독서타임은 감각적인 디자인을 유지하면서도 사용자의 독서 경험을 해치지 않았어요.
(1) ‘책을 읽고 기록하려는' 사용자에게 가장 핵심적인 기능인 [읽을 책 선택]과 [타이머 시작]은 메인 화면 전면에 큼직하게 배치해 사용자가 직관적으로 접근할 수 있도록 했습니다.
(2) 책을 선택하는 단계에서는 팝업창을 활용해 화면 이동 없이 바로 선택할 수 있도록 구성함으로써, 플로우의 뎁스를 최소화했고요.
(3) 또한 타이머 종료 후에는 별점 → 읽은 페이지 수 → 메모 순으로 한 항목씩 기록하게 하여, 감상 기록 흐름을 단순화했습니다. (저로 말할 것 같으면, 이렇게 단계별로 나눠진 구조 덕분에 읽은 내용을 부담 없이 남길 수 있었습니다.)
만약 독서보다 '앱 조작'에 신경 쓰게 만드는 요소들이 많았더라면, 이 서비스 역시 오래 사용하지 못하고 삭제했을 겁니다.
5가지 전략 요소 체크표[부록] GUI 디자인 팁
이처럼 심미성과 유용성을 동시에 고려하는 작업은 UI 설계부터 GUI 디자인까지, 프로세스 전반에 걸쳐 이어지는 일. 그래서 이번 글에서는 제가 실제로 GUI 디자인 작업을 하며 활용하는 팁까지 함께 정리해 봤어요. 각 팁마다 참고하기 좋은 레퍼런스도 첨부했으니, 여러분의 디자인에도 유용한 도움이 되길 바랍니다.
1️⃣ 기본만 잘해도 절반은 간다,
잘 만든 디자인 시스템 적극 활용하기.
Google material design감각적인 스타일을 적용하지 못하더라도 기본기가 탄탄한 UI 컴포넌트 사용은 '균형 잡힌 깔끔한 인터페이스'라는 인상을 남깁니다. 많은 기업들이 오픈한 디자인 시스템 레퍼런스를 적극 참고하세요. 해당 가이드들은 이미 심미성과 사용성이 적절히 조율된 시스템으로, 이를 활용하면 UI 퀄리티를 빠르게 높일 수 있습니다.
✏️ 추천 레퍼런스:
- [Google] Material design guide
- [Apple] iOS human interface guideline
: https://developer.apple.com/design/human-interface-guidelines/components
- [원티드] https://www.figma.com/community/file/1355516515676178246
- [밀리의 서재] https://www.figma.com/community/file/1054670787974508295/millie-design-library-2-0
2️⃣ 기본적인 UX 원칙을 파악하고 싶은가?
동일 도메인의 유사 앱을 참고하자.
App store디자인하려는 서비스가 속한 도메인의 보편적인 앱 구조를 살펴보세요. 각 도메인(예: 금융, 이커머스, 소셜 네트워크 등)에는 사용자들이 기대하는 공통적인 UX 패턴이 존재합니다. 따라서 관련 앱들을 직접 이용해 보며 해당 도메인에서 최소한으로 제공해야 하는 기능과 UI 요소를 파악해야 합니다.
✏️ 추천 레퍼런스:
- 모빈: https://mobbin.com
- 디나스: https://www.uxdnas.com
3️⃣ 미감 높은 GUI 디자인을 원한다면,
실험적인 인터페이스 리서치하기.
60fps조금 새로운 UI, 인터랙션 디자인 인사이트가 필요하다면 관련 그래픽 실험이 활발히 이루어지는 사이트나 계정을 탐색합니다. 하지만 멋져 보인다고 무작정 적용하는 것은 금물. '이 인터페이스가 실제 기능과 잘 어울릴까? 적합한 시각화가 맞는가?' 질문해야 합니다. 핵심은 '아이디어'를 얻는 것이지, 따라 그릴 밑그림을 찾는 게 아니란 사실을 잊지 마세요.
✏️ 추천 레퍼런스:
- Spotted in Prod : @spottedinprod (X계정)
- 60fps : https://60fps.design
4️⃣ 좋은 UX/UI는 직접 써봐야 한다,
밸런스가 잘 잡힌 앱 다운로드해서 써보기.
Apple design award직접 써보며 느껴보는 것이 가장 좋은 학습법입니다. 서비스를 이용하며 ‘이 앱이 왜 편할까?’, ‘이건 왜 불편할까?’를 따져보세요. 특히 특정 요소가 예쁜데 불편하거나, 반대로 편하지만 시각적인 매력이 부족하다면 구체적으로 어떤 디자인이 그러한 인상을 만드는지 분석해 봅시다.
✏️ 추천 레퍼런스:
- [Apple App design award 수상 앱]: https://developer.apple.com/design/awards/
사용성과 심미성을 모두 고려된 완성도 높은 UI/UX 사례입니다. 특히 ‘심미성’ 부문 수상작을 보면, 사용성을 해치지 않는 선에서 설계된 다양한 인터랙션과 비주얼 실험을 확인할 수 있어요.
- [국내 IT 대외활동 프로젝트] : 솝트(SOPT): @sopt_official / 디프만(Depromeet): @depromeet / 넥스터즈(Nexters): @team_nexters
주로 MVP 수준으로 설계되기 때문에 완성도는 조금 낮을 수 있으나, 학생 디자이너들은 최신 트렌드에 민감하게 반응하기 때문에 현재 유행하는 UI스타일 및 인터랙션 트렌드를 경험해 볼 수 있습니다. (근래에는 3D 그래픽이 정말 많더군요.)
아름다움과 편리함, 그 사이란..
심미성은 사용자의 신뢰를 얻고 긍정적인 첫인상을 형성하는 강력한 요소로, 그 자체만으로도 높은 설득력을 가집니다. 하지만 디자인은 겉모습만으로 완성되지 않죠. 직관적인 사용성과 정교한 기능이 함께할 때, 진정으로 사용자를 위한 경험이 설계됩니다.
요약해 볼게요.
✔️ 심미적 사용성 효과
사용자는 미적으로 우수한 제품을 더 직관적이고 신뢰할 수 있다고 인식한다.
하지만 밸런싱이 중요한 법. 과한 디자인은 사용성을 해친다. 반대로 기능적이기만 한 제품은 서비스의 매력을 떨어뜨리며 사용자를 이탈하게 만들 수 있다.
✔️ 균형을 맞추는 5가지 디자인 전략
사용자 흐름을 방해하지 않는 UX 원칙을 준수한다.
직관적이고 가벼운 인터랙션을 설계한다.
의미 있는 애니메이션과 비주얼 임팩트를 활용한다.
첫인상을 결정하는 단계(온보딩, 스플래쉬)에서는 심미성을 적극 활용해 본다.
익숙한 패턴을 유지하면서도 차별화된 경험을 제공할 수 있는 디테일을 고민한다.
✔️ 균형감 있는 GUI 작업 팁
많은 기업들이 오픈해둔, 잘 만든 디자인 시스템을 적극 활용하자.
동일 도메인의 유사 앱을 참고하며, 보장되어야 하는 UX 패턴을 파악하자.
그래픽적 영감을 얻을 수 있는 사이트나 SNS 계정을 찾아보되, 아이디어를 얻는 정도로 활용한다.
(앱스토어 기준) Apple app design award, 오늘의 앱 등에서 소개되는 완성도 높은 앱을 직접 사용해보며, 이 밸런스가 어떻게 잡혀있는지 경험해 본다.
@Greening Brunch book ㅣ Ep (7)UX/UI 디자인에서 가장 중요한 것은, 결국 사용자를 이해하는 것. 본 시리즈에서는 다양한 유형의 사용자들을 분석하고, 그들의 심리와 행동 패턴을 UX 설계 원칙과 함께 탐구합니다.
