초보 웹디자이너 필수 북마크
디자인 영감부터 무료 리소스, 학습 사이트까지! 주소킹이 엄선한 초보 웹디자이너에게 꼭 필요한 필수 북마크 사이트 모음입니다. 이 사이트들과 함께 멋진 웹디자이너로 성장해보세요!
웹디자이너 성장을 위한 꿀팁
꾸준히 보고 배우기
매일 새로운 디자인 트렌드가 등장합니다. 좋은 디자인을 많이 보고 분석하는 습관을 들이세요.
- 디자인 포트폴리오 사이트(Behance, Dribbble 등) 탐색하기
- 우수 웹사이트 어워드(Awwwards 등) 수상작 살펴보기
- 잘 만든 경쟁사 또는 관련 분야 웹사이트 벤치마킹하기
- 디자인 관련 블로그나 뉴스레터 구독하기
기본기 탄탄하게 다지기
화려한 기술보다 디자인 원칙과 웹 표준을 이해하는 것이 더 중요합니다. 기본에 충실하세요.
- HTML, CSS, JavaScript 기초 꾸준히 학습하기
- 타이포그래피, 색상 이론, 레이아웃 등 디자인 원리 공부하기
- 웹 접근성 및 웹 표준 준수 노력하기
- 사용자 경험(UX) 관점에서 디자인하기
직접 만들고 공유하기
이론만으로는 부족합니다. 작은 프로젝트라도 직접 만들고 피드백을 받으며 실력을 키워나가세요.
- 개인 프로젝트 진행 또는 스터디 참여하기
- 다양한 무료 리소스 활용하여 연습하기 (무료 리소스 참고)
- 자신의 작업물을 포트폴리오로 정리하고 공유하기
- 디자인 커뮤니티 활동하며 동료들과 교류하기
- 피드백을 열린 마음으로 수용하고 개선하기
디자인 영감 & 레퍼런스
막막할 때 아이디어를 얻고 디자인 트렌드를 파악할 수 있는 사이트입니다.
무료 스톡 이미지/영상
고품질의 사진과 비디오를 저작권 걱정 없이 사용할 수 있는 곳입니다. (라이선스 확인 필수!)
- Pexels Videos- Pexels의 무료 스톡 비디오 섹션상세보기
무료 폰트 & 아이콘
웹사이트의 분위기를 결정하는 폰트와 디자인 완성도를 높이는 아이콘을 무료로 구할 수 있습니다.
- Google Fonts- 가장 방대하고 안정적인 무료 웹폰트상세보기
- Font Awesome- 웹에서 가장 많이 쓰이는 아이콘 폰트상세보기
- The Noun Project- 통일성 있는 심플한 아이콘 모음상세보기
웹디자인 학습
HTML, CSS, JavaScript 등 웹 개발 기초부터 디자인 툴 사용법까지 배울 수 있는 곳.
- MDN Web Docs- 웹 기술 표준, 가장 정확하고 깊이 있는 문서상세보기
- freeCodeCamp- 체계적인 커리큘럼 따라 배우는 무료 코딩상세보기
- CSS-Tricks- CSS 궁금증 해결! 다양한 예제와 팁상세보기
유용한 디자인 도구
웹디자인 작업의 효율을 높여주는 필수 디자인 및 협업 도구입니다.
- Adobe Photoshop- 말이 필요 없는 이미지 편집계의 절대 강자상세보기
- Adobe Illustrator- 깨짐 없는 벡터 이미지, 로고 만들 땐 필수!상세보기
- Adobe Color- 색 조합 고민될 때? 여기서 영감을!상세보기
- Responsively App- PC에서 다양한 기기 화면 미리보기상세보기
초보 웹디자이너 FAQ
웹디자인 영감은 주로 어디서 얻나요?
영감은 발품 파는 만큼 얻는 법! Behance나 Dribbble에서 다른 디자이너 작업 구경하는 건 기본이고요, Pinterest에서 이미지 모으거나 Awwwards 같은 수상작 사이트 둘러보는 것도 좋아요. 잘 만든 사이트 자체가 최고의 교과서죠.
무료 디자인 리소스 사용 시 저작권 문제는 없나요?
Unsplash, Pexels 같은 곳은 상업적으로도 자유롭게 쓸 수 있는 경우가 많지만, 방심은 금물! 각 사이트의 라이선스 정책이나 이미지별 사용 조건을 꼭 확인하는 버릇을 들이세요. 특히 인물 사진이나 특정 로고가 있다면 사용 범위 제한이 있을 수 있으니 더 꼼꼼히 봐야 합니다. 주소킹의 무료 리소스 페이지에도 관련 내용이 있으니 참고해보세요.
웹디자인 공부는 무엇부터 시작해야 할까요?
가장 기본은 역시 HTML과 CSS예요. 웹 페이지의 뼈대와 옷 같은 존재니까요. W3Schools나 freeCodeCamp 같은 곳에서 쉽고 체계적으로 배울 수 있어요. 이게 익숙해지면 JavaScript를 배워서 좀 더 생동감 있는 페이지를 만들어 볼 수 있고요. 이론만 파기보다는 Figma 같은 디자인 툴도 만져보면서, 배운 걸로 간단한 웹페이지라도 직접 만들어보는 게 실력 향상에 최고랍니다.
포트폴리오는 어떻게 만드는 것이 좋을까요?
자신 있는 프로젝트나 습작 3~5개 정도를 골라서, 그냥 결과만 띡 보여주는 게 아니라 '왜 이렇게 디자인했는지', '어떤 문제를 해결하려 했는지', '어떤 기술을 썼는지' 등을 명확하게 설명하는 게 중요해요. 과정을 보여줘야 실력을 제대로 어필할 수 있거든요. Behance나 개인 웹사이트에 보기 좋게 정리하는 걸 추천합니다.
주소킹에 웹디자인 관련 정보가 더 있나요?
그럼요! 유용한 도구 카테고리에는 Figma, Adobe 툴처럼 디자인 작업에 날개를 달아줄 도구들을 모아뒀고, 무료 리소스 섹션에서는 저작권 걱정 없이 쓸 수 있는 이미지나 폰트 사이트 정보를 얻을 수 있어요. 앞으로 블로그에도 웹디자인 꿀팁이나 유용한 정보를 꾸준히 올릴 예정이니 자주 들러주세요!