와이어프레임 그릴 때 유용한 사이트 Top 5
(프로세스는 사람마다 다르겠지만) 와이어프레임 작업을 할 때 아래의 과정을 거치는 편인데, 각 스텝 별로 참고하는 사이트들을 한두개씩 꼽아봤다. 실제로 회사에서 일하면서 가장 자주 들락거리는 곳들이기도 하다.
와이어프레임 작업 단계
1. 유사 서비스의 화면 및 플로우 분석
2. 플로우에 맞춰 키 컴포넌트 구성
3. 화면 구조 및 내비게이션 설계
4. 위의 과정을 반복하며 스케치 디벨롭
모빈은 데스크 리서치로 화면 분석할 때 빼놓을 수 없는 사이트다. 에어비앤비, 스포티파이를 포함한 유명한 해외 모바일 서비스의 스크린샷이 무려 5만 장 이상 정리되어있다고 한다. 앱의 카테고리, 디자인 패턴, 컴포넌트 별로 필터 검색이 가능해서 필요한 스크린을 빨리 수집할 수 있다는 장점이 있다. iOS 화면만 지원했었는데, 얼마 전부터 iOS와 안드로이드를 구분해서 제공하고 있다.
Login 하는 스크린을 필터한 모습wwit https://wwit.design/
모빈의 한국판이다(진짜진짜 기다렸다)! 다음 웹툰, 보맵, 배달의 민족, 토스 등 국내 서비스들의 스크린을 분석할 때 참고하기 좋다. UX/UI로 유명한 웬만한 곳들은 다 확인할 수 있으며, 빠른 속도로 서비스들이 추가되고 있다. 각 서비스 별로 온보딩, 홈, 주요 메뉴 별로 화면이 정리되어있어 원하는 플로우를 중심으로 보기에 적합하다.
Material Design System https://material.io/components
Google의 Material System은 가장 범용적으로 적용할 수 있도록 정리된 디자인 가이드라인이다. 내비게이션, 컴포넌트, 레이아웃 등 화면을 설계함에 있어 핵심적인 요소들을 스터디할 수 있다. 해당 플로우에서 스낵바와 배너 중 어떤 것이 더 적합할지, 내비게이션이 중복적으로 사용되고 있지 않은지 등을 체크할 때 매우 유용한 사이트다.
Carbon Design System https://www.carbondesignsystem.com/components/overview/
Carbon Design System은 IBM의 디자인 시스템으로, B2B 서비스를 기획할 때 보기 좋다. 특히 Data Visualization 메뉴에서 차트의 종류와 아나토미를 상세히 설명해줘서 대시보드처럼 데이터 가시화가 중요한 스크린을 설계할 때 도움이 된다.
*위 두 디자인 시스템은 스케치, 피그마 툴킷으로도 제공된다. 툴킷을 활용하면 와이어프레임 단계에서 디자인 공수를 최대한 줄일 수 있어 효율적이며, 협업할 때 레벨을 맞추기도 편리하다.
Tailwind CSS https://tailwindcss.com/
리스폰시브 웹서비스를 기획할 때 알게 된 사이트다. CSS Framework 소개 페이지인데, 리스폰시브 서비스 기획 시 브레이크 포인트 별로 고려해야 할 레이아웃과 컴포넌트에 대한 감을 익힐 수 있었다. 이 외에도 다크 모드나 hover, focus와 같은 state 표현 등 디자인 작업에도 참고할 만한 내용이 많다.
