5 Years of Design, 개인이 5년 동안 모은 눈에 띄는 웹디자인 사례!, 1,644개의 영감을 주는 웹사이트 디자인 모음! : Collected 등 웹사이트 하나를 기준으로 눈에 띄는 사례를 큐레이션 해주는 서비스를 종종 소개했어요. 직접 찾기 어려운, 매력적인 디자인을 갖고 있는 사례를 언제든 들여다볼 수 있다는 점은 좋지만 특정 인터페이스나 기능 단위로 여러 사례를 살펴보고 싶다는 생각도 한 번씩 하게 되었습니다. 그러다 배너, 버튼, 카드, 설정, 검색, 로그인 등 웹서비스를 구성하는 다양한 구성 요소를 동일한 구분에 따라 모아볼 수 있는 곳을 알게 되어 오늘 간략하게 살펴보고자 합니다.

‘Interface-Index’는 B2B, SaaS 등 PC 환경에서 우리가 사용하는 여러 웹서비스 인터페이스 사례를 소개해주는 곳입니다. 앞서 말씀드렸던 것처럼 디자인이 뛰어나고, 쉽게 볼 수 없었던! 의 기준이 아니라, 우리가 실제 서비스를 구성할 때 하나씩 고민하고 살펴봐야 할 기능, 구성 요소 단위로 사례를 살펴볼 수 있다는 점이 이곳의 가장 큰 매력입니다. 배너, 버튼, 카드UI, 클립보드에 복사, 드롭다운, 빈 상태, 검색, 테이블, 사이드바 등 웹서비스에 꼭 필요한 구성요소가 345개 이상 등록되어 있어요.

원하는 키워드(인터페이스 종류나 서비스명)를 입력해 사례를 찾아보는 것도 가능하고, 제공되는 구성요소를 선택해 사례를 모아보는 것도 가능합니다. 저는 ‘B2B SaaS’를 준비하며 데이터가 없는, 빈 상태의 화면을 기획하고 있는 단계라 해상 사례를 가장 먼저 살펴봤어요. 데이터가 없는 상황을 다양하게 표현한 사례를 이미지가 포함된 리스트로 확인할 수 있습니다.

특정 사례를 클릭하면 일부가 아닌 사례 전체 화면을 확인할 수 있어요. 위 이미지는 메일침프의 ‘내 파일’ 메뉴가 비어있는 상태의 모습입니다. 이처럼 특정 구성요소를 선택, 전체 사례를 리스트로 확인한 뒤 특정 사례를 선택해 자세히 확인하는 과정으로 전체 사례를 확인할 수 있어요.

로그인 화면도 빼놓을 수 없죠. 뉴스레터 유료 멤버십을 준비하며 최근 회원가입과 로그인에 필요한 다양한 사례와 내용을 정리하고 있기에 더 반가운 사례입니다. 리스트를 통해 서비스명도 함께 확인할 수 있어요. 로그인 등 화면이 큼직하지 않은 사례는 리스트를 통해 충분히 보고 넘어갈 수 있습니다.

카드 인터페이스와 관련된 사례도 확인할 수 있어요. 웹서비스 사례를 제공하는 경우, 가입 등의 과정을 거치지 않아도 살펴보기 쉬운 B2C 위주로 구성되는 경우가 많은데, 이곳은 B2B 중심의 SaaS 사례를 볼 수 있어 개인적으로 참고할 내용이 더 많다는 생각이 듭니다.

실제 서비스를 사용하며 데이터를 채워 넣지 않는 이상 보기 힘든 테이블 사례도 포함되어 있네요. 물론, 이제 막 사례를 등록하기 시작한 상태라 구성요소 단위로 살펴보면 사례가 다양하지 않은 경우도 있어요. 그럼에도 불구하고 앞서 말씀드린 것처럼 B2B 위주의 사례를 확인할 수 있다는 점, 꾸준한 업데이트를 약속한 점을 통해 B2C와 또 다른 모습의 인터페이스 사례를 확인하기 좋은 곳이라고 생각합니다. 더 자세한 내용은 ‘이곳’을 통해 확인해주세요!

화면 분석, 사례 등을 확인할 수 있는 서비스를 모은 노션 페이지 입니다. 링크를 확인해주세요!