웹사이트 패턴 오픈

웹사이트 레퍼런스도 유아이볼에서 확인해 보세요!

Sep 25. 2024

안녕하세요. 인턴 디자이너 이미영입니다. 여러분은 주로 모바일 화면과 웹 화면 중 어느 쪽을 더 자주 작업하시나요? 웹 디자인 작업 시, 레퍼런스를 찾는 데 어려움을 겪으신 적은 없으신가요?

이번에 기존의 한정된 웹사이트 패턴의 탐색 범위를 넓힐 수 있는 새로운 기능이 오픈되었어요. 이번 포스팅에서는 이용 방법을 소개하고, 관련된 이야기를 나눠보려 해요. 함께 살펴보실까요?

이 기능은 꾸준히 들어온 웹사이트 추가 문의를 바탕으로 개발이 시작되었어요.

저 역시 평소에 웹사이트 레퍼런스를 탐색할 때, 빠르게 원하는 자료를 찾는 데 어려움을 느끼고 있었어요. 해외에는 잘 정리된 웹 레퍼런스 사이트들이 많지만, 문화적, 분위기 및 스타일의 차이로 인해 국내에 적합한 참고 자료로 활용하기에는 한계가 있어요. 반면, 국내 레퍼런스 사이트는 레퍼런스의 분류가 모호하거나 단순히 사이트 주소를 아카이빙 해놓은 경우가 많아, 적절한 탐색이 어렵다는 문제점이 있었어요.

웹사이트 탐색 행태 알아보기

저희는 모바일과의 차이점을 파악하고, 웹사이트 패턴 제공 방식에 대한 정보를 얻기 위해 UT에서 웹사이트 패턴 탐색과 관련된 몇 가지 질문을 진행했어요.

먼저, 웹사이트 작업 시 주로 어떤 방식으로 레퍼런스를 찾는지에 대해 질문했어요.

(ex. 레퍼런스 사이트 참고, 직접 탐색 등)

이에 참가자분들은 이렇게 답변하셨어요. :

대다수의 참가자는 사이트가 아카이빙 된 레퍼런스 서비스를 사용하기보다, 직접 관련된 사이트를 찾아보는 경향이 있었음을 파악할 수 있었어요. 또한, 모바일은 다양한 유형을 함께 훑어보는 참가자들이 존재했는데요. 웹의 경우에는 모든 참가자가 작업 중인 웹사이트와 동일한 유형이나 기능을 우선적으로 찾는 경향이 있음을 알 수 있었어요.

다음으로, 레퍼런스 사이트를 사용해 본 경험이 있는 참가자들에게 어떤 서비스를 사용했으며, 주로 어떤 작업 및 상황에서 사용했는지 여쭤봤어요.

다음과 같이 답변해 주셨어요. :

국내는 지디웹, 디비컷을 주로 사용하셨고 해외는 어워즈, 모빈을 사용하셨다는 걸 알 수 있었어요.

현재 지디웹과 디비컷은 카테고리별 분류는 제공하나, 메인 페이지를 제외한 나머지 페이지의 화면은 제공되지 않으며, 지디웹의 경우 심사에서 선정된 사이트만 게시되어 있어요.

해외의 경우, 앞서 말씀드렸다시피 문화적 차이와 스타일의 차이가 디자인에도 반영이 되기 때문에 국내 디자이너들에게는 적합한 레퍼런스라고 말하기 어려운 부분이 있어요.

위 인사이트를 토대로 사용자에게 제공할 세부 기능을 정리했어요.

✅ 대다수의 참가자는 아카이빙 된 레퍼런스보다는 직접 관련 사이트를 찾아보는 경향

웹사이트는 인터랙션이 들어간 페이지가 많이 존재해요. 또한, 현재 UI 패턴 및 플로우를 모두 보여주는 레퍼런스 서비스가 존재하지 않기에 더욱이 사용자가 직접 경험해야만 하는 상황이에요.

특히나 접하기 어려운 B2B 서비스, 결제가 필요한 번거로운 구매 패턴 같은 경우를 모두 경험하기에는 한계가 있어요.

따라서 직접 접속하지 않아도 사이트를 경험할 수 있도록 (1) 인터랙션 영상 (2) 사이트의 모든 패턴을 기본적으로 제공해요. 추가로, 한 번 더 디테일한 경험을 만나볼 수 있도록 사이트 주소도 함께 제공해요.

✅ 모바일에서는 다양한 유형을 살펴보는 반면, 웹에서는 동일한 유형이나 기능을 우선적으로 찾는 행태

모든 참가자가 공통적으로 언급한 만큼, 카테고리와 UI 패턴 항목이 더욱 중요하다고 생각되었어요. 웹사이트는 모바일과 달리 랜딩 페이지처럼 새로운 항목이 있거나, 반대로 웹사이트에서 쓰이지 않는 항목이 있어 완전히 다른 필터 구성이 필요해요. 해당 기능은 다음 프로젝트에서 모바일과 함께 새롭게 개선할 예정이니, 조금만 기다려주세요!