우리가 어떤 회사에 대해 알아볼 때 그 회사의 공식 사이트를 방문하죠. 사이트가 어떻게 디자인되어 있느냐에 따라 첫인상이 달라집니다. 너무 조악하고 옛스러우면 관리가 되지 않는 것 같고, 너무 모션이 많으면 페이지가 넘어가는 게 느려서 답답하기도 합니다. 요즘은 모바일로 사이트를 방문하는 경우가 많아서 웹디자인도 많이 달라졌죠. PC버전과 모바일 버전을 구분하는 곳도 있지만 아예 반응형으로 만들어서 하나의 템플릿만 사용하기도 합니다. 요즘은 대부분의 기업들이 반응형 웹디자인을 요구하고 있습니다.
계속 변화하는 웹디자인 흐름을 파악하고 포트폴리오를 만들 때 참고하기 좋은 사이트들입니다. 화려한 디자인부터 심플하고 평범한 디자인까지, 반응형 웹디자인을 공부할 수 있는 사이트들을 모아봤습니다. 모두 무료로 열람할 수 있습니다.
사이트 이름 옆의 링크를 클릭하면 해당 사이트로 바로 이동됩니다. 템플릿을 다운 받는 사이트가 아닌, 디자인을 볼 수 있는 사이트들입니다. 참고하시는 건 상관 없지만 완전히 베끼거나 하지는 마세요. 특히 과제하는 대학생 분들, 교수님이 다 아십니다. 사실 배끼더라도 막상 직접 만들면 완전히 다르게 바뀌는 경우가 많긴 합니다. 그래도 저작권을 꼭 조심하시길 바랍니다. 특히 다른 학생에게 지적 당하면 민망한 상황이 펼쳐질 수 있어요.
Awwwards https://www.awwwards.com
Awwwards는 UI, UX 참고 사이트로도 소개했던 곳입니다. 반응형 웹 디자인을 직접 경험해 볼 수 있고, 디자이너나 아트 디렉터들의 평가도 볼 수 있습니다. 전문가가 평가하기 때문에 꽤 많은 도움이 됩니다. 디자인 공부하시는 분들 사이에서는 이미 유명한 사이트예요. 다양한 디자인이 지금까지도 꾸준히 올라오고 있습니다. 디자인쪽에서 일하는 분들 대부분이 이 사이트를 추천합니다.
Best Website Gallery https://bestwebsite.gallery
 |
| Best Website Gallery |
Best Website Gallery는 디자이너이자 개발자인 David Hellmann이 운영하는 사이트입니다. 이 사이트는 그가 영감을 받은 사이트를 모아 놓은 갤러리라고 생각하시면 됩니다. 핀터레스트를 아예 개인 페이지로 만들었다고 보시면 되겠네요. 마음에 드는 사이트에 투표를 할 수 있고, 해당 사이트의 전체 스크린샷도 볼 수 있습니다. 오른쪽 위를 보시면 필터링 기능도 있습니다. 원하는 색상을 사용한 사이트를 볼 수 있어요. 모두 실제로 존재하는 사이트이기 때문에 'Go to Website'를 클릭하면 해당 사이트를 직접 방문할 수 있습니다. 디자이너들의 포트포리오를 보는 것도 좋지만 실제로 운영되는 사이트를 보면 또 다른 영향을 받을 수 있습니다.
Siteinspire https://www.siteinspire.com
 |
| Siteinspire |
Howells-Studio에서 운영하는 Stieinspire입니다. 참고하기 좋은 다양한 반응형 웹사이트들이 태그로 정리되어 있습니다. 스타일, 폰트, 주제, 플랫폼으로 분류하여 100가지가 넘는 태그가 있습니다. 블로그, 포트폴리오, 화장품, 여행, 이벤트 등 다양한 태그가 있네요. 원하는 태그를 선택하면 관련된 웹사이트들만 쭉 나옵니다. 이미 자료가 굉장히 많지만 최근에도 계속 업데이트가 되고 있는 사이트입니다.
Land-book https://land-book.com
 |
| Land-book |
Land-book은 다양한 웹사이트를 포트폴리오, 블로그, 인터넷 쇼핑몰 등으로 분류하여 모아 놓은 사이트입니다. 실제로 존재하는 사이트들이기 때문에 직접 방문할 수도 있습니다. 디자인하려는 사이트의 용도가 정해져 있다면 Land-book에서 검색하시는 걸 추천합니다. 특히 블로그 템플릿 디자인이나 디자이너들의 포트폴리오를 모아 놓은 곳은 별로 없는데 유용한 사이트네요. 디자인들을 보면 위에 소개된 Siteinspire의 확장 버전이라는 느낌입니다. 개인적으로는 Siteinspire가 좀 더 좋은 자료만 모아 놓은 느낌이네요.
디비컷 https://www.dbcut.com/bbs/index.php
 |
| DBCUT |
디비컷은 한국 사이트입니다. 다양한 한국 웹사이트의 디자인을 평가하고 우수한 웹사이트를 모아 놓은 곳이에요. 디비컷 사이트 자체는 평범하지만 모아 놓은 사이트들의 디자인은 참고하기 좋습니다. 섬네일 이미지를 클릭하시면 해당 사이트로 이동할 수 있습니다. 모두 실제로 존재하는 사이트들이에요. 카테고리가 정말 다양하기 때문에 원하는 용도의 사이트들을 보기 좋습니다. 우리나라 사이트라서 한글을 사용하기 때문에 폰트 크기를 참고하기도 좋습니다.
이건 별 상관없는 이야기인데, 요즘 워낙 대부분이 반응형 디자인이다 보니 이렇게 직관적인 디자인의 사이트가 그리워질 때가 많습니다. 반응형은 화려함으로 인해 오히려 원하는 정보를 빠르게 찾기 어려운 경우가 많죠.
Calltoidea http://www.calltoidea.com
 |
| Calltoidea |
Calltoidea는 웹사이트를 페이지별로, 요소별로 분류한 것이 큰 특징입니다. 주제나 디자인 컨셉에 따라 분류하지 않았습니다. 대신에 사이트의 로그인 페이지, 에러 페이지, 프로필 디자인, 동영상 플레이어 디자인, 달력 디자인 등을 조각내어 분류했습니다. 예를 들어 'Register'라는 카테고리에 들어가시면 각 사이트의 회원가입 페이지가 어떻게 디자인되어 있는지 볼 수 있습니다. 아쉬운 점이 있다면 이렇게 분류하자는 아이디어는 좋지만 자료가 많지 않다는 점입니다. 최신 자료가 올라오지는 않는 것 같습니다.
한국에서는 디비컷을 많이 방문하는 것으로 알고 있습니다. 더 다양한 자료를 보고 싶다면 해외 사이트도 자주 둘러보시는 걸 추천합니다. 우리가 인터넷을 계속 사용하는 이상, 웹디자인은 망하지 않을 분야이니 한 번쯤은 공부해보는 걸 추천드려요. 웹 퍼블리셔나 웹 디자이너를 꿈꾸는 분들, 포트폴리오를 제작하려는 디자이너 분들에게 도움이 되었길 바랍니다.
0 댓글