이 한 가지 깨달음이 앱과 웹사이트를 디자인하는 방식을 완전히 바꿨어요
디자인이 드디어 ‘딱’ 맞아떨어지는 순간, 그리고 왜 아무도 그렇게 설명하지 않았을까 싶은 그 순간, 아시죠? 저는 UI/UX 디자인이 그냥 예쁘게 만드는 거라고 생각했었어요. 그러다 사실은 오랜 친구처럼 느껴지게 만드는 게 핵심이라는 걸 깨달았죠. 여러분이 인터페이스 디자인에 발을 담그기 시작했거나, 실력을 좀 더 키우려고 한다면, 실제로 중요한 게 무엇인지 알려드릴게요. 군더더기 없이, 그냥 제가 일찍 알았더라면 좋았을 내용들입니다.
처음 Figma 캔버스를 보고 멍하니 있던 기억이 나요. 완전히 얼어붙었죠. 찾을 수 있는 모든 UI UX 디자인 튜토리얼을 다 봤지만, 정작 어디서부터 시작해야 하는지 가르쳐주는 건 아무것도 없었어요. 비결은? 직사각형이 아니라 글자부터 시작하는 거예요. 최고의 UI 디자인 도구를 열기 전에, 노트북을 들고 누군가 여러분의 화면에서 무엇을 하고 싶어 하는지 끄적여보세요. 그게 UX 디자인 원칙의 핵심입니다. 반대편에 있는 사람을 이해하는 거예요. 그라데이션과 그림자에 집착하는 걸 멈추니 모든 게 더 쉬워졌습니다.
이제 방 안의 코끼리에 대해 이야기해볼게요. UX와 UI를 전문 용어 없이 설명하면 이렇습니다. UX는 샌드위치를 만드는 논리입니다. 단계, 순서, 빵이 눅눅하지 않을 때의 안도감. UI는 플레이팅, 소스를 예술적으로 뿌리는 것, 너무 예뻐서 사진을 찍고 싶게 만드는 그 모습이죠. 사람들이 실제로 작동하는 앱 인터페이스를 어떻게 디자인하냐고 물으면 저는 이렇게 말해요. 먼저 샌드위치 레시피를 디자인하고, 그다음에 예쁘게 만들어라. 굽지도 않은 케이크에 크림을 바를 순 없잖아요. 그래서 초보자들이 바로 Figma 초보자 튜토리얼로 뛰어들어 사용자 흐름을 하나도 그려보지 않고 픽셀을 옮기기 시작하면 좀 안타까워요. Figma는 강력한 도구입니다. 쉽게 최고의 UI 디자인 도구 중 하나죠. 하지만 그냥 망치일 뿐이에요. 여전히 무엇을 만들지 알고 있어야 합니다.
그 말이 나왔으니, 실제 웹사이트 UI 디자인 기본에 대해 구체적으로 설명해볼게요. 좋은 웹사이트 레이아웃은 혁신이 아니라 친숙함에 관한 겁니다. 사람들은 로고가 왼쪽 위, 내비게이션이 위쪽, 명확한 콜투액션(Call-to-Action)이 있을 거라고 기대합니다. 수백만 개의 다른 사이트에서 뇌가 훈련되었기 때문이죠. 그 패턴을 깨는 순간, 사용자는 생각하게 됩니다. 그리고 생각은 곧 마찰입니다. 예전에 이커머스 결제 과정을 다시 디자인했는데, 그냥 '계속' 버튼을 사람들이 예상하는 위치로 옮겼더니 장바구니 포기율이 20%나 떨어졌어요. 그게 사용자 인터페이스 디자인 팁의 조용한 마법입니다. 지루해 보이지만 돈을 벌게 해주거나 시간을 절약해줍니다.
이제 모바일 앱 UI 디자인에는 특유의 까다로운 점이 있습니다. 엄지손가락이 화면의 지배자입니다. 저는 주요 동작을 항상 엄지손가락이 편한 영역, 즉 휴대폰 아래쪽 절반에 배치합니다. 앱을 스케치할 때는 말 그대로 한 손으로 휴대폰을 들고 손가락 요가를 하지 않고도 버튼에 닿을 수 있는지 테스트합니다. UI 디자이너가 되는 법은 이런 공감 가득한 잔소리로 귀결됩니다. 화려한 학위가 필요하지 않아요. 대신 여러분이 매일 사용하는 앱에서 발생하는 모든 사소한 불편을 짜증날 정도로 관찰할 줄 알아야 합니다. 커피 앱이 '재주문' 버튼을 세 화면 뒤에 숨겨놨다고요? 머릿속으로 고치세요. 적어보세요. 축하합니다, 여러분은 UI 디자이너처럼 생각하고 있는 겁니다.
돈을 많이 들이지 않고 UI 디자이너가 되는 법이 궁금하다면, 제 경로를 알려드릴게요. 유튜브에서 무료 UI UX 디자인 튜토리얼로 아주 기본적인 것을 배운 뒤, 바로 제가 좋아하는 앱의 한 화면을 재현했어요. 앱 전체가 아니라 단 한 화면, 픽셀 하나하나를 Figma로 똑같이 따라 그렸습니다. 이것이 초보자가 정말 필요한 유일한 Figma 초보자 튜토리얼입니다. 좋은 디자인 결정을 리버스 엔지니어링하면서 도구를 배우게 되니까요. 구성 요소를 보면서 질문했어요. 왜 이 패딩은 8px이 아니라 16px일까? 왜 이 색은 검은색이 아니라 회색일까? 점차 UX 디자인 원칙의 보이지 않는 규칙들이 눈에 띄기 시작했습니다. 좋은 디자인은 대부분의 사람이 눈치채지 못하지만, 없으면 확실히 느끼는 작고 의도적인 결정들의 연속이라는 걸 깨달았죠.
여러분을 구해주고 싶은 흔한 함정이 하나 있습니다. 바로 드리블(Dribbble) 함정입니다. 드리블은 아름답지만 실용적이지 않은 공상으로 가득 차 있어서 실제 사용성을 망가뜨릴 겁니다. 실제 모바일 앱 UI 디자인은 긴 이름, 빈 상태, 오류 메시지, 느린 로딩 시간을 처리해야 합니다. 그런 것들이 섹시해 보이지는 않지만, 프로와 아마추어를 구분짓는 요소입니다. 사용자 인터페이스 디자인 팁을 줄 때 저는 항상 이렇게 말합니다. 먼저 못생긴 상태를 디자인하라. Wi-Fi가 끊겼을 때의 화면을 디자인하라. 사용자가 장바구니에 상품이 0개일 때 어떻게 될지 디자인하라. 그 순간에도 여러분의 디자인이 도움이 된다면, 제대로 한 겁니다.
최고의 UI 디자인 도구에 대해 말하자면, Figma는 당연한 사랑을 받고 있으며 그럴 만한 이유가 있습니다. 협업이 가능하고, 브라우저 기반이며, 개인 사용자에게 무료입니다. 저는 와이어프레임부터 고해상도 프로토타입까지 모든 것에 Figma를 사용합니다. 하지만 종이와 펜을 간과하지 마세요. 가장 빠르고 명확한 웹사이트 UI 디자인 기본 아이디어는 종종 도트 그리드 노트북에 낙서한 대충 그린 스케치에서 시작됩니다. Figma로 옮긴 후에는 Content Reel 같은 플러그인을 사용해서 현실적인 텍스트를 채우고, Stark로 접근성 검사를 합니다. 많은 UI UX 디자인 튜토리얼 콘텐츠가 접근성을 생략하지만, 이는 UX 디자인 원칙의 핵심 교리입니다. 시각 장애가 있는 사람이 여러분의 인터페이스를 사용할 수 없다면, 그것은 나쁜 인터페이스입니다. 그냥 그렇습니다.
앱 인터페이스를 디자인하는 방법을 한 문장으로 압축해 달라는 요청을 자주 받습니다. 제 대답은 이겁니다. 대화를 디자인하라. 모든 탭은 한 마디이고, 모든 화면은 답장입니다. 앱이 약간 재치 있는 도움이 되는 친구와의 대화처럼 느껴진다면, 여러분이 이긴 겁니다. 그래서 저는 마이크로인터랙션(micro-interaction)을 좋아합니다. 무언가 로드될 때 살짝 튀어오르는 효과, 길게 누를 때 부드럽게 진동하는 것. 그것들은 인간 대화에서 알아주는 고개 끄덕임과 같아서 모바일 앱 UI 디자인이 로봇 같지 않고 살아있는 듯 느껴지게 만듭니다.
아직도 UX와 UI의 차이를 자신의 커리어 측면에서 이해하려고