마음에 드는 디자인의 웹사이트를 발견했다면!!

자료를 찾다가, 한 번씩 전혀 예상치 못한 만남을 갖게 되는 경우가 있습니다. 독특한 레이아웃의 웹사이트, 눈길을 확 끄는 디자인의 앱 등을 말이죠. 이런 경우 나중을 위해 하나씩 저장해두고 있는데요! 이 과정에서 유난히 깊게 들여다 보게 되는 요소가 있다면 제게는 ‘컬러와 폰트’가 아닐까 싶습니다. 레이아웃은 이제 어떤식으로 잡아가야 하는지 감이 잡히는데 컬러와 폰트의 경우에는 여전히 어렵게 느껴지기 때문입니다. 그래서 컬러팔레트를 구성할 수 있도록 도와주는 서비스를 사용해 컬러값을 추출해보기도 하고, 요소 검사를 통해 사용된 폰트를 확인해보기도 하는데요! 얼마전, 웹사이트를 기준으로 해당 페이지에서 사용된 컬러값과 폰트 정보를 보기 쉽게 추출해주는 서비스를 발견해 오늘 소개드릴까 합니다 🙂

 

웹사이트 URL만 입력하면 사용된 컬러값과 폰트 정보를!!

오늘 소개드릴 서비스는 ‘Unpack’입니다. 시카고에 위치한 소프트웨어 디자인, 개발 스튜디오 ‘LocallyCoded’에서 제공하고 있는 서비스죠. ‘Unpack’이 우리에게 제공해주는 기능은 명확합니다. 원하는 사이트의 URL을 입력하면 그곳에서 쓰인 컬러와 폰트 정보를 제공해주는 것! 메인페이지로 들어가보면 사람들이 검색해본 사이트들의 정보를 볼 수 있습니다. 좌측으로는 인기있는 폰트와 자주 쓰이지 않지만 독특한 컬러값을 함께 보여주고 있죠.

 

우선, 메인화면 리스트에 있는 사이트 한 개를 클릭해봤습니다. 아주 잘 다듬어진 구성이 아니라 처음엔 좀 어지러웠지만..ㅎㅎ 이내 정보들을 확인해볼 수 있었는데요. 사이트에 대한 정보와 함께 사용된 폰트 및 컬러의 수와 상세 정보를 볼 수 있습니다. 선택한 서비스이자 웹사이트는 ‘Square Cash’라는 곳이었는데 29개의 컬러와 3개의 폰트를 쓰고 있네요. 대표 컬러만을 제공해주는 것이 아니라 사용된 대부분의 정보를 제공해주기에 좋았습니다.

 

상세정보를 확인한 뒤, 궁금한 마음에 요즘 새글 구독을 위한 RSS 봇을 제작하기 위해 활용하고 있는 ‘Motion AI’라는 사이트 정보를 입력해봤는데요! 컬러값이 288개나 나와서 왜 이렇게 많은가 했더니 ‘Motion AI’의 메인화면에 다양한 봇 종류가 이미지로 노출되고 있기 때문이라는 사실을 알게 되었습니다. 이미지를 많이 사용하는 곳이라면 위와 같이 웹사이트 자체의 고유한 정보를 볼 수 없겠다는 생각이 들더군요. 이 부분은 조금 아쉬웠습니다.

 

이미지에 포함된 폰트는 어차피 이미지로 인식을 하기 때문에, 폰트는 있는 그대로의 정보로 활용이 가능했습니다. 더 편리했던 것은 사용된 폰트에 모두 구글 검색값을 확인할 수 있는 링크가 걸려있다는 점이었죠. 사용된 폰트를 클릭하면 위와 같이 폰트 정보를 상세히 볼 수 있습니다. 폰트 정보를 찾아 헤맬 필요가 없는 것이죠.

 

이미 다양한 웹사이트 정보가 등록되어 있어, 하나씩 살펴보는 것도 좋고 원하는 URL을 직접 입력해 정보를 확인하는 것도 간편한 ‘Unpack’. 사용된 폰트와 컬러 정보가 궁금하시다면 지금 바로 ‘Unpack‘을 확인해보세요! 

 

Comments are closed.