–

이런 사례를 찾아보고 싶은데, 다른 서비스는 어떻게 하지? 라는 질문은 서비스 기획 과정에서 한 번은 꼭 하게 되는 것 같아요. 매 번 캡쳐하긴 귀찮고, 캡쳐해 어딘가 저장해도 서비스는 계속 업데이트가 되고 (이런 불편을 해결할 수 있는 서비스를 결국 직접 만들고 있어요. 조금만 기다려주세요) 이런 불편을 저만 겪는건 아닌지 해외에서는 다양한 디자인 사례를 확인 할 수 있는 웹서비스가 많이 나와 있는데요. 그 중 오늘은 버튼, 검색창 등 컴포넌트 단위는 물론 잘 만들어진 랜딩페이지와 타이포까지 확인할 수 있는 곳을 소개하려고 해요.

–

Lookup Design은 크게 세 가지 화면으로 구성되어 있어요.

  • 컴포넌트 사례 검색
  • 랜딩페이지 사례
  • 타이포그래피 사례

컴포넌트 검색은 다양한 디자인 사례를 키워드에 따라 확인 할 수 있어요. 페이지 타입이나 브랜드 등 직접 검색도 가능하지만 제공되는 키워드를 직접 클릭, 결과를 볼 수 있습니다.

  • 블로그
  • 쿠키 사용 안내
  • 네비게이션
  • 버튼
  • 푸터
  • 배너
  • 카드 UI
  • FAQ

이렇게 웹/앱 서비스를 구성하는 요소 별 사례를 확인 할 수 있다는 점이 Lookup Design의 가장 큰 매력이기도 합니다.

–

네비게이션 검색 결과

전체 화면을 캡쳐해 어느 영역인지 표기해주는 방식이 아니라 검색한 키워드에 해당하는 사례만 잘라 보여주기에 더 편하게 볼 수 있어요. 위 이미지는 네비게이션 사례 리스트로, 이미지와 서비스명을 함께 확인할 수 있어요.

–

검색 사례

이번에는 ‘검색’에 해당하는 사례 모음입니다. 여러 사례들을 한 화면에서 확인 할 때의 장점은 무엇보다 ‘비교’가 간편하다는 점이에요. 이 중 참고할만한 내용은 따로 문서에 붙여 넣을수도 있지만, 검색이라는 하나의 기능을 다른 서비스에서 이렇게 다양하게 활용한다는 점을 가볍게 먼저 살펴 볼 수 있습니다.

사례 중 하나를 선택하면 위와 같이 확대된 사이즈로 볼 수 있어요.

–

버튼도 이렇게 볼 수 있고요!

–

랜딩페이지 사례를 볼 수 있다는 점도 Lookup Design의 매력 중 하나입니다. 저는 페이지 단위로의 확인은 보통 서비스 기획 초기에 많이 살펴보는 편이에요. 디자인은 둘째 치고, 우리가 만들고자 하는 서비스와 비슷한 곳들이 어떤 방법과 기능을 포함해 페이지를 구축했는지 알 수 있기 때문입니다. 앞서 컴포넌트 사례들과 같이 랜딩페이지 전체 이미지와 어떤 서비스인지 함께 볼 수 있어요.

–

타이포그래피도 얼마 전 추가되었어요. 동일 문구가 어떤 모습으로 표현되는지와 함께 각 타이포를 자세히 볼 수 있는 텍스트 링크가 적용되어 있어 바로 이동할 수 있습니다. 전체 수를 보여주지 않지만 꽤 많은 타이포그래피가 포함되어 있어 영문 기준이지만 한 번씩 둘러보고 참고하기 좋은 공간이기도 합니다.

–

랜딩페이지, 그리고 화면을 구성하는 다양한 요소들, 거기에 타이포그래피까지! 보통은 이 중 하나만 다루는 경우가 많은데 한 곳에서 세 가지 사례를 확인 할 수 있다는 점이 좋았어요. 자세한 내용은 이 곳을 통해 확인해보세요!

–

다양한 앱/웹 서비스에 대한 기능별 화면 사례가 궁금하다면?

–

Post Views: 21

RELATED ARTICLESMORE FROM AUTHOR