국내·해외 UX/UI 벤치 사이트 소개
다른 디자이너들은 프로젝트 작업 시 어디서 아이디어를 얻고 콘셉트를 도출해낼까? 디자인 분야에 발을 들인지 얼마 안 된 사람이라면 가장 궁금한 부분이죠. 오늘은 신입 디자이너들을 위해 실무 UX/UI 디자이너들이 벤치마킹에 많은 도움을 받고 있는 사이트를 소개 드리려고 합니다. 국내뿐만 아니라 해외 사이트도 소개해 드리니 내가 모르는 사이트는 없는지 확인해 보세요.
본격적인 소개에 앞서 벤치마킹이란 무엇일까요?
벤치마킹의 사전적 정의는 ‘측정의 기준이 되는 대상을 설정하고 그 대상과 비교 분석을 통해 장점을 따라 배우는 행위’를 말합니다. 쉽게 말해 동종업계 및 경쟁사를 비교 분석하여 새로운 전략을 세우는 방법입니다. 따라서 디자인뿐만 아니라 모든 프로젝트를 시작하기 전 필수적으로 거쳐야 하는 단계이죠. UX/UI 분야와 같이 트렌드가 빠르게 변화하는 시장일수록 벤치마킹은 더더욱 중요하다고 볼 수 있습니다. 그럼 국내/해외 벤치마킹 사이트를 알아볼까요?
A. 국내편
1. 디비컷
국내에서 가장 오래된 벤치마킹 사이트 ‘디비컷’입니다. 최근 오픈된 홈페이지들 중 선정된 홈페이지가 메인 화면에 게시됩니다. 뿐만 아니라 외국 사이트, 워드프레스, 반응형 등 카테고리로 분류되어 있고 웹 에이전시 카테고리에서 다양한 에이전시 정보도 확인할 수 있습니다. 오래된 사이트인 만큼 회원들의 세월이 느껴지는 커뮤니티도 활성화되어 있습니다.
2. 지디웹
국내 벤치마킹 사이트 중 가장 퀄리티가 좋은 ‘지디웹’ 입니다. GDWEB은 Good Design Web의 줄임말로 학계 인사 및 아트디렉터급 디자이너를 심사위원으로 위촉하여 우수작을 선정합니다.
이렇게 선정된 선정작들은 연말에 다시 한번 온라인 투표와 최종 심사위원 평가를 거쳐 분야별 FINALIST를 선정하여 한 해 동안 열심히 달려온 UX/UI 분야 종사자들에게 많은 힘이 되어주고 있습니다.
최근에는 대학생과 취준생들을 위해 저작권 제약 없이 사용 가능한 무료 이미지도 배포하고 있습니다.
3. RWDB
RWDB는 Responsive Web Design DB의 줄임말로 반응형 홈페이지만 모아둔 벤치마킹 사이트 입니다. 최근 대부분의 홈페이지가 반응형으로 제작되고 있습니다. 디바이스에 따라 어떻게 최적화해야 하는지 감이 오지 않을 때 참고하기에 좋은 사이트입니다.
4. dbdic
디비딕(dbdic)은 웹디자인 벤치마킹 사전이라는 뜻을 갖고 있습니다. 앞에 소개해 드린 사이트들은 잘 만들어진 선정작을 모아두었다면 디비딕은 말 그대로 '사전'처럼 많은 양의 사이트를 확인할 수 있습니다.
디비딕의 가장 큰 장점은 서브 페이지도 벤치 할 수 있다는 점인데요. '인사말', '오시는 길', '조직도' 등 원하는 페이지를 선택하여 모아볼 수 있어 신입 디자이너분들에게 많은 도움이 될 것 같습니다.
B. 해외편
1. awwwards
가장 유명한 해외 벤치마킹 사이트 awwwards입니다. 전 세계의 BEST 사이트만 모아둔 곳이라는 생각이 들 만큼 창의적이고 독특한 디자인과 애니메이션이 많기 때문에 디자인 공부하기에 정말 좋은 사이트입니다. 자꾸 나도 모르게 전형적인 디자인만 하게 된다면 접속해 리프레시 하며 창의성을 깨우기에 좋겠죠?
2. THE FWA
awwwards 와 비슷하게 전 세계의 창의적인 디자인을 만나볼 수 있는 벤치마킹 사이트입니다. 매일매일 선정작을 하나씩 메인에 띄워주고 있으며 스크롤 하며 수상작들을 한눈에 확인하며 최신 트렌드를 파악하기에 좋은 곳입니다.
3. Nicely done
https://nicelydone.club/patterns
다양한 사이트별 스크린샷을 모아둔 벤치마킹 사이트입니다. 사이트 별 뿐만 아니라 '404', 'Account', 'Sign in' 등 원하는 기능별 페이지도 모아볼 수 있습니다. 비록 모든 스크린샷을 확인하고 싶다면 월 10달러의 결제가 필요하지만 벤치하는 시간을 줄일 수 있다면 10달러 정도는 기꺼이 지불할 수 있을지도 모르겠습니다.
4. SAVEE
핀터레스트의 고급 버전이라고 볼 수 있는 사이트 SAVEE입니다. 로그인 후에 사용이 가능하지만 일단 접속하면 높은 퀄리티의 이미지들의 향연에 전혀 후회하지 않을 것입니다. 나만의 보드를 만들어 자료를 저장하고 좋아하는 작가를 팔로잉 할 수도 있습니다.
5. Mobbin
모바일 앱 또는 웹을 제작할 때 참고하기 좋은 사이트 Mobbin입니다. 신규 업데이트된 앱을 따로 설치할 필요 없이 원하는 앱을 검색하여 모든 스크린샷을 바로 확인할 수 있습니다. 심지어 피그마와도 연동되어 더욱 쉽고 빠른 벤치가 가능합니다.
6. 일본사이트
일본 벤치마킹 사이트는 모아서 소개 드립니다. 일본 웹사이트의 경우 한자나 세로로 쓰인 텍스트때문에 거리감이 느껴질 수 있지만 일본 특유의 다양한 디테일이나 버튼 모션을 참고하여 프로젝트의 완성도를 높일 수 있답니다. 뿐만 아니라 레이아웃이나 귀여운 일러스트를 참고하기에도 좋습니다.
1) Web Design Clip
2) CSS Design Awards
https://www.cssdesignawards.com/
3) S5-Style
4) MUUUUU.ORG
마치며
앞서 말했듯이 벤치마킹은 프로젝트를 시작하기 전 필수적으로 거쳐야 하는 중요한 단계입니다. 하지만 일반적으로 대다수의 디자이너들은 프로젝트 착수 직전 필요한 것들만을 찾아 벤치 사이트에 접속하는 경우가 많은데요. 매일 꾸준히 접속하여 다양한 이미지를 접하고 트렌드를 파악하고 있다면 작업에 착수할 때 더 빠르게 대응할 수 있을 것입니다. 필자는 출근 후 업무를 시작하기 전 새로 업데이트된 사이트를 확인하며 벤치를 습관화하고 있습니다. 여러분도 오늘부터라도 매일 출근 직후 30분, 또는 자기 전 10분씩 가볍게라도 사이트를 둘러보는 건 어떨까요?
