brunch

You can make anything
by writing

C.S.Lewis

by 박찬호 Feb 17. 2021

웹디자인을 위해 참고할 만한 사이트 추천 #1

엑기스만 모아놓은 나의 북마크

좋은 웹디자인을 위해선 수많은 리소스와 시간, 그리고 좋은 레퍼런스(Reference)가 필요하다.


다양한 웹페이지를 설계하고 완성하기까지, 그리고 그 사이트들을 운영해가면서 정말 셀 수 없이 많은 레퍼런스를 봐왔다. 그중에서도 아직까지 나의 북마크의 자리를 차지하고 있는 사이트를 몇 가지 추려서 공유하고자 한다. 물론 비핸스(behance)나 드리블(dribbble)에서도 좋은 시안을 많이 볼 수 있지만 정식으로 운영되고 업데이트도 신경 써서 하는 '진짜' 사이트가 더 도움이 될 때가 많다. 이 중에는 익숙한 사이트지만 레퍼런스라고 생각 못하고 무심코 지나간 부분들도 있을 것이라고 본다.





1. 애플 공식 홈페이지

https://www.apple.com/kr/


애플은 제품, 광고, 사진뿐만 아니라 웹페이지 하나에도 엄청난 공을 들이기로 유명하다.

덕분에 많은 웹디자이너들은 애플의 홈페이지를 이리 뜯고 저리 뜯어보고 있다.(그중 하나가 나ㅎㅎ) 제품을 소개하는 페이지뿐만 아니라 애플의 비즈니스, 가치관 등을 소개하는 페이지도 참 매력적이다. 어디 하나 버릴 구석이 없고 내 머리만으로는 상상할 수 없는 흐름이 전개된다. 개인적으로는 디자이너뿐만 아니라 개발자에게도 추천하는 사이트이다. (동영상으로 처리할 만한 부분도 정성스럽게 코드로 한 땀 한 땀 설계되어 있다..)


카피라이팅도 매력적이다.
애플은 블러(Blur)를 기가 막히게 잘 활용한다.




2. BMS 유나이티드

https://www.bmsunited.com/


벙커 및 윤활유 무역 회사 BMS 유나이티드의 홈페이지는 과감한 레이아웃이 인상적이다. 살면서 저런 사이트를 만들어 볼 수 있을까 싶지만 부분 부분 참고할 곳이 많다. 구경하다 보면 마우스 커서를 이곳저곳 옮기고 있는 자신을 발견할 것이다.






3. 아파트멘터리

https://apartmentary.com/about


아파트멘터리는 2016년에 설립된 국내 인테리어 스타트업 회사다. 귀여운 일러스트, 감각적인 타이포, 양질의 콘텐츠가 어울려져 아파트멘터리의 브랜딩을 잘 표현하였다. 회사 소개를 감각적으로 표현하고 싶다면 아파트멘터리의 사이트를 참고해보자.


약간 매거진을 읽는 기분이랄까





4. wework 홈페이지

https://www.wework.com/ko-KR/search


혹시 사이트에 여러 지점들을 보기 좋게 모아놓은 지도가 필요한가? 또는 지점 하나하나에 대한 자세한 정보를 잘 전달하고 싶은가? 그러면 wework 홈페이지 만한 곳이 없을 것이다. wework는 전 세계 800개가 넘는 지역에 분포되어 있는 지점들을 아주 보기 좋게 정리해놓았다.


솔루션을 3D 오브젝트로 표현한 것도 인상 깊다.





5. 토스 디자이너 채용

https://toss.im/career/designer-2020


트렌디한 회사 채용 페이지를 제작하길 원한다면 형식화된 기성 채용 사이트보단 토스의 2020년 디자이너 채용 페이지를 참고하면 도움이 될 것이다. 기존의 채용 페이지와는 사뭇 다른 분위기를 풍긴다.


움직이는 Key Visual이 눈길을 사로잡는다.




6. Nike 공식 온라인 몰

https://www.nike.com/kr/ko_kr/


쇼핑몰을 운영하고 있다면 Nike의 홈페이지를 잘 참고해보길 바란다. 개인적으로는 Nike가 브랜드의 공식 쇼핑몰은 이래야 된다는 기준을 세워준 것 같다. 레이아웃 자체는 매우 심플하지만 그렇기 때문에 콘텐츠(제품)에 더 눈길이 간다. 하지만 콘텐츠 하나하나에 공을 들일 수 없다면 사이트가 밋밋해질 수 있으니 주의해야 할 것이다.






7. CNP 컴퍼니

http://www.cnpcompany.kr/


CNP 컴퍼니는 회사 자체가 스타트업 규모라고는 할 수 없으나, 회사 홈페이지의 톤 앤 매너가 개성 있게 잘 지켜지고 있다. 페이지에 스타트업 분위기를 뿜 뿜 하고 싶다면 참고하길 추천한다. 개인적으로는 웹디자이너뿐만 아니라 그래픽 디자이너에게도 추천한다. (포스터 하나 하나가 주옥같다.)






8. 카카오페이 소개 페이지

https://www.kakaopay.com/main


정제되고 잘 정리된 이야기, 기능들을 친절하게 풀어내고 싶다면 참고하길 추천하는 사이트다. 카카오 페이라는 서비스를 생활 / 관리 / 금융 부분으로 나누어 귀여운 일러스트와 함께 전개했다.






지금까지 웹디자인 시 참고할만한 사이트를 몇 가지 소개해보았다. 개인적인 의견이지만 좋은 디자인을 하기 위해선 좋은 레퍼런스를 많이 보고 많이 따라 해 보는 것이 중요한 것 같다. 물론 무작정 따라 하기보단 잘 만들어진 레퍼런스를 하나하나 뜯어보면서 디자인한 사람의 의도와 기술을 생각하는 것이 중요하다. 그리고 그 인사이트를 바탕으로 나의 작업물을 만들어가면 훨씬 수월할 것이다.


(기회가 될 때마다 참고할만한 사이트를 정리해 공유하고자 한다.)



브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari