웹디자인 입문 강좌

웹디자인 입문 강좌

공유하기

안녕하세요. 디자인베이스입니다. 웹 디자인 입문 강좌를 시작합니다 : )

“사수가 없어서 시작을 어떻게 해야될지 모르겠어요…”

“웹디자이너가 되고 싶은 학생인데 학교에서 따로 안 배워요…”

“전 웹디자이너가 아닌데 회사에서 시켜요…”

일반적으로 웹 디자인 혹은 앱 디자인을 하고 싶은 분들의 가장 큰 고민은 이 3가지라고 생각이 됩니다. 고액의 비용과 시간을 투자해서 학원을 다니기엔 부담되는 경우도 있죠. 물론 세상에 공짜는 없습니다… 초반에 실력 쌓을때까지 학교, 학원, 주변 지인들에게 도움 없이는 시작하기 쉽지 않습니다. 저와 함께 배워봐요.

웹디자인 입문 강좌 - 모델페이지 인터렉션 GIF

입문자분들을 위한 강좌로 제가 가진 지식을 충분히 공유해드릴게요. 하지만 첫 시작 가이드라인을 드리는 것이고 실제로는 여러분 혼자 스스로 꾸준히 공부하셔야 됩니다. 영상 몇 분짜리 한 두 번 본 거로 실력이 늘 거라고 생각하신다면 시작하지 말아 주세요. 그게 맘 편합니다.

만약 웹 디자인 쪽으로 제대로 공부하고 싶다면 이 강좌를 시작으로 국내·외 관련 아티클, 가이드라인, 타이포그래피, 그리드시스템, 그래픽 기술(이미지합성 및 편집), 웹 개발, 기획, UX 등 꾸준히 학습하시길 바랍니다. 그래야 본인의 기술이 됩니다!

1. 웹 디자인은 끝났다?

웹의 시대는 끝났다라는 말 한때 들어보신적 있나요? 어느정도는 맞는 말일 수 있어도 저의 생각은 조금 다릅니다.

5G와 IoT(사물인터넷)의 확장으로 기존에 우리가 접하는 PC, 스마트폰, 스마트 워치를 넘어 스마트 TV, 인공지능 스피커, 자동차 클러스터, 냉장고, 세탁기, 공기청정기 등의 다양한 디바이스에 웹이 들어가고 있습니다.

과거에 퍼스널 컴퓨터가 도입되면서 인쇄쪽은 망했다고 했지만, 비율은 달라질뿐 아직도 잘 살아있죠. 교보문고와 영풍문고에 가봐도 책은 아주 꽉 차 있습니다. 웹이란 것도 시대에 맞게 변화될 뿐, 절대 없어지지 않을 것이라고 생각합니다.

웹디자인이 망하지 않는 이유 - 5G, IoT, AR, VR, 인공지능 등 신기술 들이 많이 쏟아지기 때문

이런 말도 들어보셨나요? “웹보단 앱을 공부해야 한다.” 저의 개인적인 생각으로는 웹과 앱을 구분하는 것은 의미가 없다고 생각합니다. 각각의 장단점이 있으므로 두 개의 특정을 파악하고 그 안에 들어가는 UI를 목적에 맞게 디자인을 하는 것이지, 웹과 앱을 구분 지어 평생을 웹 디자인만 혹은 앱 디자인만 하진 않을 거잖아요.

2. 웹디자인 입문 강좌 튜토리얼

웹디자인 예제 - 메인 페이지 PC Mobile
  1. 강좌 소개 및 웹에 대한 이해
  2. 용어 정의
  3. 부트스트랩을 통해 웹 UI 기본 컴포넌트 알아보기
  4. 레이아웃, 그리드시스템
  5. 와이어프레임과 게슈탈트
  6. 웹 디자인 – PC 메인
  7. 메인 비주얼 제작
  8. 웹 디자인 – PC 서브
  9. 브레이크 포인트
  10. 웹 디자인 – Mobile 메인
  11. 웹 디자인 – Mobile 서브
  12. 에셋 저장 및 출력
  13. 가이드라인 작성법
  14. 웹 코딩 맛보기

제가 준비한 웹 디자인 입문 강좌는 대략 이렇지만, 중간에 피드백과 요청에 따라 강좌의 내용은 조금씩 달라질 수 있습니다. 함께 만들어 가는 강좌 🙂

웹디자인 예제 - 제품 리스트 페이지 PC Mobile

진짜 공부의 시작은 강좌 끝나고 인거 아시죠? 해당 강좌가 마무리되면 꼭 본인의 웹 디자인으로 복습해보시고 이곳 저곳에 자랑해주세요. 그게 여러분의 ‘진짜’ 실력이 됩니다.

3. 필수 준비물

웹디자인 강좌 필수 사용 툴 - 스케치, 포토샵

포토샵과 스케치를 사용할 예정입니다. 전반적인 UI 작업은 스케치를 사용하며, 이미지 편집 및 그래픽 작업은 포토샵을 사용합니다. 만약 맥 사용자가 아니고 스케치가 아닌 XD나 피그마를 사용하시는 분이라면 이번 강좌는 툴 강좌가 아니기 때문에 본인에게 맞는 툴을 사용하셔도 무관합니다.

만약 포토샵과 스케치 툴을 배우고 싶은 분들은, 툴 강좌로 따로 올려놓은 강좌를 참고해주세요. 웹 디자인에 대한 지식이 없어도 괜찮지만, 간단한 툴을 사용하지 못할 정도로 디자인 자체에 초급이신 분들은 해당 강좌와 안 맞을 수 있습니다ㅠㅠ

스케치 강좌 – http://designbase.co.kr/category/sketch_course/

포토샵 강좌 – http://designbase.co.kr/category/photoshop_course/

4. 자주하는 질문

Q. 웹 디자인 공부한지 얼마 안 된 입문자가 봐도 될까요?
A. 네, 그런 분들을 위한 만든 입문용 강좌입니다.


Q. 프로토타이핑도 배우나요?
A. 프로토타이핑은 따로 배우지 않습니다. 배우고 싶으시면 제가 올린 강좌 중 인비전 강좌나 프린서플 강좌를 참고해주세요~!


Q. 앱 디자인 강좌는 없나요?
A. 앱 디자인 강좌는 유료 강좌로 제작중입니다. 조만간 구매 후 배워 보실 수 있습니다.


Q. 입문 강좌를 마쳤는데, 이후에 웹디자인 실력은 어떻게 쌓나요?
A. 앞서 말씀드린 것처럼 꾸준히 인풋과 아웃풋을 반복해야 됩니다. 입문자를 위한 가이드라인일 뿐, 더욱 실력을 늘리기 위해서는 많은 정보들을 공부하셔야 하고, 실무 경험이 쌓여야 합니다.