오늘 소개할 서비스는 실제 존재하는 웹사이트를 기준으로 웹디자인 사례를 확인할 수 있는 곳입니다. 전반적인 구성은 물론, 사용된 카피라이팅과 컬러 정보도 함께 확인할 수 있어요. 보통 이 웹사이트의 디자인이 좋다! 정도로 소개하는 곳은 많은데, 이곳처럼 사용된 컬러 조합 등을 함께 확인할 수 있는 곳이 많지 않아 저도 보자마자 즐겨찾기를 한 서비스입니다.

‘pixelfika’의 랜딩 화면 모습입니다. 눈에 띄는 웹디자인 사례와 카피라이팅 정보를 만날 수 있다는 안내를 가장 먼저 확인할 수 있어요. 상단에 디자인과 컬러 메뉴가 나란히 배치된 것 역시 확인할 수 있습니다. 웹디자인과 컬러를 어떻게 확인할 수 있는지는 아래에서 다시 자세히 설명할게요.

웹디자인을 살펴볼 수 있는 리스트 구성입니다. 메인 화면 기준 대표 이미지를 확인할 수 있고, 아래로 사용된 컬러 정보를 함께 제공합니다. 대표 이미지를 통해 마음에 드는 웹디자인 사례를 찾거나, 사용된 컬러가 마음에 든다면 클릭 후 더 자세한 정보를 살펴볼 수 있어요.

리스트에서 자세히 보고 싶은 웹디자인 사례를 클릭한 모습입니다. 이미지 기준으로 사이즈를 더 키워 볼 수 있어요. 왼쪽 아래에는 사용된 컬러 정보를, 오른쪽으로는 컬러 자세히 보기 버튼과 웹사이트로 바로 이동할 수 있는 버튼이 있어 필요에 따라 빠른 활용이 가능합니다.

앞에서 말씀드린 ‘컬러 정보 자세히 보기’ 버튼을 클릭한 모습입니다. 이전 화면에서는 어떤 컬러인지 대략적인 내용만 볼 수 있었는데, 클릭하면 이렇게 컬러값을 자세히 확인할 수 있습니다. 컬러값 아래로 다시 두 개의 버튼을 확인할 수 있는데, 왼쪽 아래에는 웹사이트로 바로 이동할 수 있는 버튼이 오른쪽에는 웹디자인 사례(이전 화면)를 확인할 수 있는 버튼이 있습니다. 빠르게 양쪽을 오갈 수 있는 역할을 하고 있어요.

다른 웹디자인 사례를 확인한 모습입니다. 이렇게 리스트를 통해 원하는 웹디자인 사례를 자세히 확인할 수 있는 구성을 갖고 있습니다. 반복되는 내용이지만 실제 적용된 디자인 사례와 컬러 정보를 함께 볼 수 있다는 점이 가장 큰 매력이라고 생각합니다.

구성을 상세히 확인하고 싶을 경우, 실제 웹사이트로 바로 이동할 수 있어 전체 페이지가 어떻게 작업되어 있는지 살펴볼 수 있습니다. 이렇게 확인이 필요한 이유는 등록 후 컬러 등의 디자인이 변경된 경우가 있기 때문입니다.

리스트를 쭉 살펴봤는데, 등록된 웹디자인 사례가 워낙 풍부해 둘러보는 즐거움이 있습니다. 전 세계 다양한 서비스의 웹디자인 사례를 살펴볼 수 있다는 장점도 있어요.

또 이렇게 컬러 정보만 모아서 확인할 수 있다는 점도 눈에 띕니다. 웹디자인 사례로 시작해 컬러를 확인하는 것도 가능하고, 컬러 정보로 시작해 적용된 웹디자인 사례를 보는 것도 가능하기 때문입니다. 두 가지 정보를 한 곳에서 확인하고 싶다면 이곳을 자주 들여다보는 것이 하나의 좋은 방법이 되지 않을까 싶네요. 더 자세한 정보는 ‘링크’를 통해 확인해주세요!