오프라인 캠프
입문

코딩으로 웹디자인 STEP ONE

과제 중심의 웹 코딩 입문과정, 비디오 강의 + 1:1 피드백

  • 단계

    입문

  • 강의기간

    6시간씩 4회

  • 정원

    6인 소수정예

  • 학습관리

    과제 중심 진행

  • 특장점

    맞춤 피드백

  • 장소

    홍대/신촌/강남 일대

생생한
수강후기

이지은

2020년 04월 30일

html과 css는 계속 찔끔찔끔 배웠다 말았다 하면서 까먹기를 반복하고 있었는데, 체계적인 수업내용과 맞춤형 피드백을 통해서 탄탄한 기본기를 갖추게 된 것 같습니다. 거의 개념 정리가 아무것도 안 되어있는 상태에서 몇 백줄짜리 코드가 들어가는 페이지를 만들 수 있을 정도로 성장했다는 게 너무 신기해요. 개인적으로는 예제와 키워드가 주어지고 그걸 개인적으로 검색하고 공부하면서 과제에 적용해보는 과정과 이전 과제를 피드백해주신 동영상을 시청한 것이 가장 빨리 코딩에 적응하는 데에 도움이 된 것 같아요. 또 과제가 한 페이지에 정리돼서 한 눈에 체크할 수 있는 부분도 좋았구요. 한 달이라는 시간이 순식간에 흘러갔네요. 개인적인 사정으로 바로는 못하고 다음 달에 한걸음 더 강의를 신청했는데, 또 얼마나 제 실력이 늘어날지 기대가 됩니다. :)

코딩으로 웹디자인STEP ONE

  • 수강대상입문자 : 코딩으로 디자인 구현하는 것을 시작하는 사람
    • 개발자와 원활한 소통을 원하는 디자이너
    • 자신의 디자인을 코딩으로 직접 구현하고 싶은 디자이너
  • 강의목표웹사이트 레이아웃 안정적으로 구현하기

    가장 기본적인 기술로 웹사이트 레이아웃을 구현하는 방법과 핵심을 이해하는 것이 본 강의의 가장 큰 목표입니다.

    그 핵심을 이해하면 본인이 원하는 형태로 자유롭게 웹사이트 레이아웃을 직접 구현할 수 있습니다.

    아무리 복잡한 레이아웃이라고 할지라도 결국에는 핵심 내용이 반복적으로 응용되어서 구현되기 때문입니다.

    디자인툴로 디자인하는 것과 코드를 입력해서 디자인하는 것의 차이점을 이해할 필요가 있습니다.

  • 준비사항강의 참여를 위한 준비
    • Laptop 필수(노트북 등 개인용 컴퓨터)
    • 필기도구 지참(스케치 용도)
    • 10분전 착석
11월 강의일정
Sun Mon Tue Wed Thu Fri Sat
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
  • 평일2021년 11월 평일 저녁
    • 2021년 11월 1일 - 11월 25일
    • 매주 월,목 19시 - 22시(3시간)
    • 주 2회씩 4주, 총 8회(24시간)
  • 주말2021년 11월 주말 오후
    • 2021년 11월 6일 - 11월 27일
    • 매주 토 13시 - 19시(6시간)
    • 주 1회씩 4주, 총 4회(24시간)
12월 강의일정
Sun Mon Tue Wed Thu Fri Sat
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
  • 평일2021년 12월 평일 저녁
    • 2021년 12월 6일 - 12월 30일
    • 매주 월,목 19시 - 22시(3시간)
    • 주 2회씩 4주, 총 8회(24시간)
  • 주말2021년 12월 주말 오후
    • 2021년 12월 5일 - 12월 26일
    • 매주 일 13시 - 19시(6시간)
    • 주 1회씩 4주, 총 4회(24시간)

강의특징

  • Learning : 이해할 수 있도록 천천히 배우기

    소규모 인원으로 매시간 대화하면서 진행합니다

    매시간 막힘없이 질문하고 바로 답변 받을 수 있습니다

    35%
  • Creating : 창작 활동에 집중하기

    배운 내용으로 창작 활동을 하는 것이 가장 중요합니다

    강의가 총 8회차이므로, 8번 창작 활동을 해야 합니다

    50%

My Own Graph : 그래프 시스템으로 기록을 남기는 이유

  • 1ST동기부여

    같은 시간에 같은 수업을 듣는 사람들이 과제를 공유함으로써 서로 좋은 영감을 주고받을 수 있습니다. 그리고 또 한편으로는 창작 욕구를 상승시키는 좋은 자극제가 될 수 있습니다.

  • 2ND작업 시간 관리

    일을 할 때 정해진 마감 기한 내에 일을 마무리하는 것이 중요합니다. 연습을 통해 같은 작업을 반복하면서 후반으로 갈수록 자신의 작업 속도가 어느 정도인지 몸소 체감할 수 있습니다.

  • 3RD성과 지표

    초반부터 후반까지 성과를 한눈에 볼 수 있습니다. 수강 전과 수강 후의 변화를 체감할 수 있습니다.

  • 4TH성취감

    연습하는 과정을 매번 기록으로 남김으로써 스스로 발전하고 있는 모습을 인지할 수 있습니다. 그리고 그것은 중간에 포기하지 않고 끝까지 잘 마무리할 수 있는 힘을 실어줍니다.

Values : 혼자서 얼만큼 실행할 수 있는가?

  • 1ST따라하기 예제를 지양하는 이유

    원하는 형태를 직접 구현해 보는 연습을 반복하면서 혼자서도 충분히 잘 할 수 있는 자신감이 생깁니다. 밑그림이 없어도 혼자서 원하는 그림을 그려낼 수 있습니다.

  • 2ND1:1 맞춤 피드백을 지향하는 이유

    개인마다 가지고 있는 개성이 모두 다르기 때문입니다. 잘 된 부분과 개선되어야 할 부분을 구분하여 더 나은 방향으로 갈 수 있도록 제안합니다.

과제소개

My Own Study : 모든 수강생이 직접 주제부터 선정하고 전체 페이지 구성, 디자인을 자유롭게 표현합니다. 개개인의 취향과 느낌이 모두 다르게 녹아 있습니다. 이 과제 페이지를 통해서 더 많은 사람들이 영감을 주고받을 수 있기를 바랍니다.

교육과정

  • 1주차1강 : HTML & CSS는 어떤 작업인가?
    • 문서 기본 구조 작성하기
    • 마크업과 스타일 구분하기
    • 마크업 기본 문법 이해하기
    • 스타일 기본 문법 이해하기

    웹 분야에서 HTML & CSS는 어떤 작업에 해당되는지 알아보아요. 그리고 웹 문서에서 HTML은 어떤 역할을 하는지, 또 CSS는 어떤 역할을 하는지 알아보아요.

  • 1주차2강 : CSS Box Model 이해하기
    • Box Model 5가지 구성 이해하기
    • Margin & Padding 사용법 이해하기
    • Box Model, Total Width 계산하기
    • CSS 초기화 이해하기

    Box Model은 웹 사이트 레이아웃을 잡을 때 가장 다루기 쉬워 보이지만 막상 다루어보면 연습이 가장 많이 필요한 중요한 부분이에요.

  • 2주차3강 : CSS Display 이해하기
    • CSS Display 개념 이해하기
    • Block Level Elements 이해하기
    • Inline Elements 이해하기
    • Inline-Block 이해하기

    Box Model 다음으로 연습이 가장 많이 필요한 부분이에요. 이것만 잘 다룰 줄 알아도 고정 레이아웃을 아주 간결한 코드로 문제없이 만들 수 있어요.

  • 2주차4강 : CSS Class 활용하기
    • CSS 선택자 우선순위 이해하기
    • Class - 개별 디자인하기
    • Class - 일괄 디자인하기
    • Class - 디자인 일부분만 변경하기

    태그 선택자로 원하는 디자인을 모두 만들기에는 분명히 한계가 있어요. Class 선택자를 잘 다루면 반복되는 코드를 많이 줄일 수 있어요.

  • 3주차5강 : CSS Margin 겹침 현상 이해하기
    • Margin 겹침 현상 이해하기
    • 형제간의 Margin 겹침 현상
    • 부모 자식 간의 Margin 겹침 현상
    • Margin 겹침 현상 활용하기

    Margin 겹침 현상은 피해야 할 문제점이 아니에요. 겹침 현상에 대해서 충분히 이해하면 오히려 효율적으로 디자인할 수 있어요.

  • 3주차6강 : CSS Flex Box 이해하기
    • 축 개념 이해하기
    • 컨테이너와 항목 개념 이해하기
    • 컨테이너에 지정하는 속성
    • 항목에 지정하는 속성

    Flex Box를 이용해서 가로 배치를 할 수 있어요. 컨테이너와 항목, 주축과 교차축 개념으로 이루어져 있어요.

  • 4주차7강 : CSS Flex Box 활용하기
    • 방향 설정하기
    • 아이템 순서 설정하기
    • 컬럼 너비 설정하기
    • 아이템 정렬 설정하기

    Flex Box는 옵션이 많아서 다양한 레이아웃을 만들 수 있지만 그래서 조금 복잡하기 때문에 연습이 정말 많이 필요해요.

  • 4주차8강 : CSS Position 활용하기
    • Absolute 이해하기
    • Relative 이해하기
    • Z-Index 이해하기
    • CSS Position 활용하기

    Position을 이용하면 오브젝트를 어디든 원하는 위치로 보낼 수 있어요. 하지만 꼭 필요한 순간에만 사용하는 것을 권장해요.

강사소개

  • Jeoney Kim김지연입니다, 반가워요^^

    어렸을 때부터 웹사이트 제작이 좋았습니다. 무엇인가 내 마음대로 만들어 나가는 작업이 매우 자유롭고 재미있음을 경험하였습니다. 서버 운영, 웹 퍼블리싱, 유지보수 업무 등 웹과 관련된 다양한 경험을 하였습니다. 현재는 웹 퍼블리싱 기술을 교육하는 일에 집중하고 있습니다.

    강사 이야기 더 보기
  • 교육 철학교육에 대한 가치관
    • 천천히 배우기
    • 창작활동 많이 해보기
    • 피드백 받기
    • 창작활동에 대한 고찰
    • 기록하기
  • 모든 분께수강생에게 바라는 점
    • 연습하는데 시간투자 많이하기
    • 일정한 간격으로 창작 활동하기
    • 스스로 고찰하는 시간 가지기
    • 관점에 따라 유연하게 생각하기
    • 과정을 기록으로 남기기

자주 묻는 질문

  • 캠프 과정을 모두 수료하면 어떤 수준까지 만들 수 있나요?

    수강생 작품을 참고하시면 됩니다.^^ 물론 사람마다 개인 차이는 있습니다. 온라인으로 진행되는 캠프이니만큼 주어진 과제를 수행하는 것이 굉장히 중요하다고 할 수 있습니다. 과제를 놓치지 않고 꾸준히 한다면 기본적인 홈페이지 레이아웃은 혼자서도 충분히 만들 수 있습니다.

  • 강의 난이도는 어떻게 되나요?

    처음 시작은 아무것도 모르는 입장에서 시작합니다. 그러나 강의가 절반 이상 넘어가면 홈페이지 전체 레이아웃 잡기를 토대로 다양한 구성으로 진행 됩니다.

  • 준비물은 무엇인가요?

    개인 작업 컴퓨터가 필요합니다. 운영체제는 윈도우, 맥 모두 괜찮습니다. 윈도우는 버젼 7 이상만 가능합니다. 온라인 동영상 시청시에는 별도의 컴퓨터 혹은 태블릿PC가 준비 되어있으면 좀 더 편안한 공부가 되겠습니다.

  • 디자이너만 수업을 들을 수 있나요?

    비전공자, 웹디자인 코딩에 관심이 있는 사람이라면 누구든지 참여 가능합니다.

  • 아쉽게도 일정이 맞지 않네요. / 인원이 마감되었네요.

    온라인으로 진행되는 캠프이지만 개인별 과제수행 + 1:1 영상 피드백이 핵심인 캠프이기때문에 "일정"과 "수강인원 제한"이 있습니다. 홈페이지에 이미 공지된 일정을 변경하거나 조율하는 것은 어렵습니다. 다음달의 일정을 참고 부탁드립니다. 강의 일정/장소 설문조사에 참여해주세요 :) 더욱 많은 인원에게 강의를 제공하기 위해 노력하겠습니다.

  • 환불 규정이 어떻게 되나요?

    개강 직전, 100% 환불이 가능합니다
    얼리버드 프로모션중인 캠프의 경우에는 환불이 불가능합니다
    전체 수업 일수의 50%가 이미 진행된 경우에는 환불이 불가합니다
    수업 진행일수 50%미만인 경우, 강의료의 33%를 환불해 드립니다
    환불요청: support@veamcamp.com

  • 추가적인 궁금증은?

    빔캠프에게 문의하기
빔캠프는 인터넷 익스플로러를 지원하지 않습니다. 최신 브라우저로 접속하기 권장 드립니다 :)