–
1.국내 서비스들의 404는 어떤 모습일까?
지금 써보러 갑니다 블로그를 통해 404 페이지에 대한 2개의 글을 작성했었는데요. 당시에는 해외 서비스들의 재치있는 404 페이지가 좋아 일부러 URL을 바꿔가며 확인했던 기억이 납니다. 그 경험 자체가 제게는 잘못된 접근으로 인한 부정적이 아니라 이 서비스 되게 재치있고 센스있다! 라는 긍정적 경험으로 이어졌는데요.
얼마 전 핀터레스트에서 QR코드 관련 이미지를 검색하다가 크몽으로 넘어가게 되었습니다. 아쉽게도 해당 글은 삭제된 상태였기에 운좋게(?) 크몽의 404페이지를 접하게 되었는데요. 크몽의 캐릭터가 유령의 모습을 한 상태로 페이지가 없다는 것을 재미있게 표현하고 있었습니다. 접근 경로가 다양할 수 있기에 대표 화면이라고 할 수 있는 메인페이지로 돌아가기 버튼도 적용되어 있었고요. 페이지가 없는 이유도 간략하게 제공하고 있었습니다.
해외 사례들을 보고 정리하면서 느낀 점은, 에러페이지는 사용가 스스로의 잘못처럼 느끼거나 서비스 이용에 큰 문제가 있는것처럼 느끼지 않게 해야한다는 점이었는데요. 크몽은 상황을 표현하는 일러스트레이션과 간단한 설명, 그리고 사용자가 다시 서비스의 정상 화면으로 이동 할 수 있도록 페이지 구성을 잘 해놨다는 느낌이 들었습니다.크몽을 계기로 국내 서비스들의 404 페이지를 조금더 둘러봤는데요. 1년 전 글을 쓸 때 보다 더 다양한 사례를 확인 할 수 있었습니다.
MZ 세대들을 자세히 들여다 볼 수 있는 캐럿의 경우에도 본인들의 캐릭터를 잘 살린 404 페이지를 활용하고 있습니다. 크몽과 조금 다른점이 있다면 접근 경로를 고려해 (캐럿 – 캐럿, 외부 – 캐럿) 뒤로가기 버튼과 메인으로 이동 가능한 버튼을 함께 배치했다는 점.
서핏 역시 서비스 분위기와 잘 맞는 404 페이지를 갖고 있습니다. GIF와 이모지를 적절히 활용한 모습이 인상깊네요. 서핏은 사실 원페이지 구성이라 서핏으로 이동하기라는 버튼이 그리 낯설게 느껴지지 않습니다.
브랜디, 스타일쉐어, 지그재그 모두 다른 스타일의 404 에러 페이지를 갖고 있었는데요.
그 중 최악은 지그재그로 날 것(?) 그대로의 모습을 보여줍니다. 브랜디는 사용자가 왜 이 화면을 마주하게 되었는지에 대한 설명은 제공하지만 앞서 살펴본 캐럿, 크몽들과 같이 클릭 한 번으로 이동 가능한 장치는 없었습니다.
스타일쉐어는 사용자들이 업로드한 사진을 배경으로 사용함과 동시에 동일한 문제가 발생했을 때 연락 가능한 이메일 주소, 대응 방법 등을 잘 표현해 놓았습니다. 스타일쉐어의 서비스 성격과 잘 맞는 구성!
잡플래닛과 원티드의 404 페이지 역시 접근 방법이 달랐는데요.
잡플래닛에서 가장 인상깊었던 것은 페이지를 대표하는 문구로, 사용자에게 잘못된 접근이야! 라고 말하는대신 새로운 길을 찾았네! 라는 메시지를 전하고 있습니다. “빈페이지를 발견하셨습니다!” 라고 말이죠. 또 사용자가 취할 수 있는 다음 행동 중 주소를 다시 확인하라는 문구에는 별도 컬러를 적용해 쉽게 확인 가능하며 캐럿과 같이 이전, 메인화면으로 이동 가능한 버튼을 함께 제공해주는 것도 좋네요!
원티드는 등대를 대표로 활용하고 있는데요. 어떤 의미로 사용했는지는 알겠지만, 페이지를 찾을 수 없다는 문구만 나오기에 불편하다는 생각을 지울 수 없었습니다.
사례에는 없지만, 29cm, 마켓컬리, 무신사 등은 잘못된 페이지 접근 시 별도 404 페이지를 띄우지 않고 정해진 화면으로 바로 보내고 있었습니다. 메인화면으로 리다이렉트 하는 방법. 이와 같은 방법은 사용자가 ‘잘못된 접근’이라는 인식을 하지 않고 바로 서비스를 이어서 활용할 수 있다는 장점이 있습니다.
–
👉 1-1 함께 읽어보세요!
–
2.피그마는 왜 ‘저장’ 할 때 익숙한 문구를 띄울까?
피그마가 우리에게 깊숙히 침투한 이유는 여러가지가 있겠지만 개인적으론 클라우드 – 웹 기반 서비스라는 점이 가장 중요한 이유라고 생각합니다. XD는 어도비 크리에이티브 클라우드를 기반으로 운영되긴 하지만 반드시 프로그램을 설치해야 하며, 스케치는 맥OS에서만 지원되는데요. 피그마는 우린 웹만 연결되면 어디서든 작업 할 수 있어! 라는 메시지로 기존 서비스들의 부족함을 채우려 노력했기 때문입니다.
사실 저도 윈도우용 노트북을 쓰며 XD를 처음 접하게 되어 XD를 2년 넘게 쓰다가 다시 맥을 쓰게 되면서 스케치로 옮겨오게 되었는데요. 사이드 프로젝트를 진행하며 피그마를 접한 뒤로는 계속 피그마를 이용하고 있습니다. 개별 기능도 강력하지만, 앞서 말씀드린 것처럼 웹에서 언제든 쉽게 작업 환경으로 접근할 수 있다는 점은 쉽게 다른 툴을 생각하지 못하게 합니다.
그런데 기존 습관이 참 무서운게, 클라우드 기반으로 자동 저장이 되는 피그마임에도 불구하고 한 번씩 저장 단축키를 누르게 됩니다. 근데 이게 꼭 저한테만 해당되는 건 아닌가봐요. 저장을 할 때마다 피그마는 (매 번은 아니지만) “우린 너의 작업을 자동으로 저장해” 라는 메시지를 자신감 넘치는(?) 이모지와 함께 보여줍니다.
생각해보면 구글 독스로 문서 작업을 할 때도 이렇듯 자동으로 저장이 되는데 피그마처럼 저장을 자주 하진 않는데요. 이건 아마 작업물의 중요도에 따라 달라지는 부분이 아닐까 싶습니다. 일반 문서 작업과 앱, 웹 주요 화면 등을 디자인 하는 건 중요도의 차이가 꽤 존재하기 때문이죠. 과거에 포토샵이나 일러스트 등을 활용해 작업 할 때 프로그램 중지 등 에러가 떴을 때를 생각하면.. 아마 당분간은 계속 피그마로 작업 할 때 저장을 습관적으로 하게 될 것 같아요.
아무튼! 중요한 건, 피그마는 이런 사용자들의 습관(?)을 이미 잘 알고 있으며, 그 상황을 서비스 강점을 계속 인지 할 수 있는 순간으로 활용하고 있다는 점입니다. 스케치도, XD도 여전히 저장을 따로 해야하니까요. 얼마 전 윈도우 버전이 나온 걸 보고 소리쳤던 ‘Overflow’도 마찬가지.
저장은 아주 익숙한 행동이지만, 그 익숙함이 모든 상황에 동일하게 적용되는 것은 아니에요. 그래서 사용자가 기존의 익숙함을 유지할 수 있도록 (안도감과 같은) 하는 피그마의 모습이 꽤 인상적이었습니다.
–
👉 2-1 함께 읽어보세요!
–
3.요기요는 왜 홈화면에 태그를 추가했을까?
요기요가 얼마전 홈화면에 특정 메뉴에 해당하는 태그를 추가했습니다. #김치찌개 #도시락 처럼 말이죠. 기존에도 음식을 구분할 수 있는 카테고리가 제공되었지만, 치킨/중식/일식 등 더 넓은 범주에 해당하는 구분이었습니다. 그럼, 요기요는 왜 특정 메뉴에 해당하는 태그를 홈화면에 배치하게 되었을까요? 우선 우리가 배달앱을 실행할 때의 상황을 살펴볼 필요가 있다고 생각합니다.
먼저, 무엇을 먹을까? 라는 질문에 대해 우리가 어떤 답을 내리는지가 중요한데요. 피자나 치킨이 먹고싶어! 라는 답을 내렸다면 앱을 실행한 뒤, 치킨 또는 피자 메뉴로 진입해 ‘원하는 브랜드나 매장’을 선택하면 됩니다. 여기까지는 꽤 익숙한 과정이라고 할 수 있죠.
그런데 김치찌개나 부대찌개가 먹고싶어! 라는 답이 나왔다면? 직접 검색을 하거나 한식 카테고리에 들어가 여러 가게들 중 부대찌개 메뉴를 취급하는 곳을 찾아야 합니다. (물론 단골집을 찜했을 경우도 존재하지만) 즉, 피자와 치킨에 비해 더 많은 세부 카테고리를 다루는 상위 카테고리의 경우 사용자가 원하는 메뉴를 주문하기 위해 여러 단계를 거쳐야 하는 상황이 발생 할 수 있다는 것.
업데이트 후 첫 실행을 기준으로 #마라탕 #곱창 #닭발 #떡볶이 #찜닭 #초밥 #버거 #김밥 #쌀국수 #삼격살 #도시락 #닭강정 #부대찌개 #육회 등의 메뉴 태그가 홈화면에 노출되고 있음을 확인했는데,해당 시간대에 주문량이 많은 메뉴인지 아니면 일정 기간에 따른 기준인지 알 순 없지만 (적어도 제가 자주 주문하는 메뉴는 아니네요)
기존 구분에 비해서 원하는 메뉴에 더 빠르게 접근 할 수 있다는 점이 이번 업데이트의 가장 큰 이유 중 하나가 아닐까 싶습니다. 이미 태그를 선택하는 순간, 검색어를 입력하는 것과 마찬가지라 검색 화면 진입 시 연관 키워드를 함께 살펴볼 수 있다는 점도 이를 뒷받침 하지 않을까 싶고요.
반대로 이렇게 생각해 볼 수도 있을 것 같아요. ‘검색’페이지로의 접근을 유도하는 방법인데요. 현재는 대표 카테고리에만 광고(우리동네 플러스)를 적용하고 있지만, 홈 화면 태그를 통해 검색 화면으로의 유입이 많아질 경우 세부 메뉴에 따라서도 광고를 집행 할 수 있는 여지가 생길 수 있을거라 생각합니다. 검색의 순기능도 사용자에게 알릴 수 있고요.
–
4.Etsy와 Idus의 상품 썸네일 위치는 왜 다를까?
개성있는 상품을 찾아볼 때 자주 들어가게 되는 두 서비스. 미국에서 시작된 Etsy와 국내에서 시작된 Idus입니다. 오늘도 어김없이 특정 카테고리 내 상품을 둘러보러 들어갔다가 웹 버전, 상품 상세페이지에서 재미있는 점을 발견했는데요. 바로 상품에 대한 썸네일 이미지의 위치가 다르다는 점이었습니다.
개인적인 기준이지만 일반적으로 접할 수 있는 상품이 아닌 경우 상품 이미지를 꼼꼼하게 들여다보는 편이에요. 또 이미 구매한 사람들의 리뷰도 마찬가지. 고관여에 해당하지 않을 수 있지만 두 서비스 특성 상 다른 곳에서 쉽게 볼 수 없는 상품이 존재하기 때문입니다.두 서비스의 상세페이지는 꽤 비슷해요. 상품을 대표하는 이미지가 큼직하게 자리잡고 있고, 그 오른쪽으로 상품명과 가격 그리고 구매 후기 등의 정보를 확인 할 수 있습니다. (사실 이건, 커머스에서 흔히 볼 수 있는 구성이기도)
그런데 상품의 다른 이미지를 확인하는 방법이 다릅니다. Etsy는 이미지 왼쪽, 위-아래로 하나씩 확인 할 수 있고, Idus는 이미지 아래쪽 좌-우로 하나씩 확인 할 수 있도록 구성되어 있어요. 처음에는 눈치채지 못했는데 썸네일을 하나씩 클릭하면서 차이를 알게 되었는데, 가장 큰 이유 중 하나는 ‘시선의 흐름’이었어요.
Etsy는 시선이 좌-우로 이동하기 때문에 선택된 이미지와 선택하려는 이미지를 더 빠르게 확인 할 수 있었습니다. 대표이미지 사이즈가 고정된 형태가 아니기에 세로 비율의 이미지를 선택한 경우 썸네일이 아래 배치되면 스크롤을 내려서 다음 이미지를 선택해야 하기에 더 편리하게 느껴진 구성이기도 했습니다.
물론.. 썸네일을 하나씩 클릭해 다음 이미지를 확인하는 사람들 보다, 대표 이미지에 자리잡은 화살표를 클릭해 넘어가는 경우가 더 많겠지만, 이 상품에 해당하는 이미지가 몇 개이고, 대략 어떤 모습인지 한 눈에 보기 위해서는 썸네일을 쉽게 확인 할 수 있어야 하기에 Etsy의 구성이 제게는 더 매력적이었습니다.
또 하나, Etsy는 첫 번째 썸네일 상단에 ‘Back to search results’라는 문구와 뒤로가기 버튼을 배치했는데요. 일반적으로 ‘웹 환경’에서는 브라우저 자체에서 뒤로가기를 지원하고, 디바이스의 터치패드 등을 통해 화면 이동이 가능하지만 현재 사용자가 어디에 있는지를 명확하게 인지시켜 주는데 효과적으로 활용 될 수 있습니다.
사용자가 특정 키워드로 검색을 했고, 해당 키워드에 해당하는 결과(리스트)에서 하나의 상품을 선택했다는 사실을 알려주는 역할을 하는 것이죠. 이 문구를 한 번 이상 접한 사용자는 다음 동일한 환경 진입 시 더 명확하게 상황을 이해하고 화면을 이동 할 수 있습니다.
–
👉 4-1 함께 읽어보세요!
–
지금 써보러 갑니다 뉴스레터 00:00 구독 안내
아이콘, 스플래시, 온보딩, 로그인과 회원가입, 프로필과 검색 화면까지! 이제 곧(10월 22일 오전) ‘통계 기능’ 이 발행 될 예정이에요. 아직 구독하지 않으셨다면! 구독 후, 서비스 구성 요소에 대한 다양한 사례와 에디터들의 생각을 확인해보세요! (구독하기)
–
- 148개의 현대적인 서체 정보를 큐레이션 해주는 곳!
- 페이스북, 인스타그램, 유튜브 광고를 입력한 정보에 따라 미리 확인해볼 수 있는 곳!
- 눈에 띄는 웹사이트를 페이지와 섹션에 따라 확인할 수 있는 곳
- 모바일앱, 앱서비스에 적용된 모션 사례를 확인할 수 있는 곳!
- 랜딩페이지, 사전예약, 이커머스 및 대시보드 구성을 위한 무료 HTML 템플릿을 확인할 수 있는 곳!
–
