2017.01

비개발자를 위한 8주간의 HTML/CSS 수업

개요

모토

중도하차 할 생각이라면 No!

무료 수업이라고 해서 나도 한 번 들어볼까? 하는 안일한 생각이라면 받고 싶지 않았습니다. 최소한 왜 듣고자 하는지 이유가 하나쯤은 있으신 분을 원했습니다. 단순 호기심으로 오셨다가 중도 하차하거나 결석으로 수업 분위기를 흐리고 싶지 않았습니다.

수업 시간은 1시간 내외

우리의 집중력은 생각보다 길지 않다는 걸 잘 알고 있습니다. 그래서 최대한 50분 정도로 마무리하고 싶었습니다. (잘 지켜지지 못했지만 ㅠㅠ) 하다 보면 이것도 저것도 다 중요한 것 같아서 하나라도 더 알려주고 싶은 마음에 1시간 반 이상 한 적도 더러 있었습니다. 분량 및 수업의 완급 조절이 정말 어렵다는 것을 많이 느꼈습니다. 적당한 시간에 적당한 예제와 실습을 병행하면서 흥미를 끝까지 이끄는 것은 매우 어려운 일이었습니다.

교재 X, 숙제 X

교재 구매를 강요하지 않았고, 제가 개인적으로 추천하는 도서를 2권 구비하여 자유롭게 볼 수 있도록 했습니다. 저의 지난 스터디 경험으로 미루어 볼 때, 각자 바쁜 일정 속에 시간이 쪼개서 임하는 스터디에서 짐을 주기 싫었습니다. 대신 스터디 시간 내에 최대한 집중에서 얻어 가길 바랐습니다. 따로 시간을 내서 하게끔 뭔가를 자꾸 주면 부담이 되고 전체적인 흥미가 떨어질 것 같았습니다. 그런데, 숙제가 없어서 아쉬웠다는 피드백도 있었습니다.

후기

스스로 많이 알고 있는 것과, 잘 가르치는 것은 별개의 일인 것 같습니다. 그것은 말주변일 수도 있고 전달력의 문제일 수도 있겠지만, 아무튼 선생님/교수님/강사님은 모두 위대하십니다. 수업을 진행하는 내내 생활코딩 이고잉님의 위대함을 느끼고 또 느꼈습니다. 잘 가르칠 수 있다고 호기롭게 큰소리 뻥뻥 쳤지만, 생각보다 비개발자에게 녹록한 커리큘럼은 아니었습니다. 1시간 수업을 하기 위해서는 최소 3시간 정도의 공부, 수업 자료 준비(PPT, 예제 코드)의 시간이 필요했습니다. 스스로 긴가민가한 상태에서 그릇된 정보를 전달해주고 싶지 않아서 MDN 문서를 가까이 두고 읽으려고 매우 노력했습니다.

HTML까지는 계획대로 잘 진행 됐는데, 오히려 재미있을 거라고 생각했던 CSS 파트에서 이론이 길어지자 급격히 지루해하는 것을 느끼고 약간의 정신적 패닉이 왔습니다. 스터디원 반응 하나 하나에 민감해질 수 밖에 없었습니다 그래서 CSS 라이언 그리기로 한 번 환기를 시키고 바로 프로젝트로 돌입했습니다. 하지만 급하게 프로젝트로 돌입해서 인지 전체 디자인만 보고 html structure부터 짜게 하는 건 역시나 어려움이 컸습니다.

이론만 배우는 것 말고 각자의 결과물을 하나씩 가져가게 하고 싶었던 저의 욕심 탓일까. 8주는 정말 짧은 시간이었습니다. 마지막에는 같이 짜기보다는 제가 짜놓은 예제 페이지를 바탕으로 왜 이렇게 짰는지 하나씩 뜯어가며 설명하는 형태로 변경하여 진행했습니다. 이 과정에서 어려워하는 사람도 있었고, 끝으로 갈수록 아쉬운 부분이 더러 생겨서 스터디원들에게 미안했습니다.

그대들도 처음 배우는 입장이고, 저도 처음 가르치는 입장이어서 크고 작은 어려움이 늘 있었지만 결과적으로는 각자의 성과를 얻을 수 있어서 다행입니다. HTML 코드 하나도 모르던 사람들도 이제는 inspect로 열어서 원하는 부분을 확인 할 수 있고, 적어도 예전처럼 낯설진 않다는 것만으로도 큰 성과라고 생각합니다. 부족한 부분이 많았지만 처음치고는 이 정도면 70점(후하게..)은 되지 않을까 스스로 매겨 봅니다. 이런 기회가 앞으로 또 생길까 싶지만 정말 좋은 경험이었습니다. 끝까지 함께 해 준 스터디원들에게도 고마움을 전합니다.

회차별 상세 후기

1. 스터디 OT (2017/01/03 화)

왜 이 수업을 듣는가?

2. 베이직 태그 (2017/01/05 목)

3. 리스트 태그 (2017/01/10 화 PM 7:05~8:20)

실습 위주의 수업을 도전

실습 결과

4. 테이블 태그 (2017/01/12 목)

5. 폼 태그 (2017/01/17 화 PM 6:30~8:00)

6. CSS 개요 (2017/01/19 목)

7. CSS 실습 (2017/01/24 목)

CSS Drawing Day

8. 프로젝트 1일차 (2017/01/31 화)

CSS 적는 순서 (정답은 아니지만 제가 쓰는 방법)

박스 사이징, 포지션, 디스플레이, 마진/패딩, 가로/세로, 테두리, 배경색, 글꼴 요소, 그 외 꾸밈 요소, 오버플로우, 지인덱스

9. 프로젝트 2일차 (2017/02/02 목)

웹 폰트 사용방법


  // in css file
  @import url('https://fonts.googleapis.com/css?family=Roboto');
  h1 {font-family: 'Roboto', sans-serif;}

10. 프로젝트 3일차 (2017/02/07 화)

11. 프로젝트 4일차 (2017/02/16 목)

손코딩 후 코드펜에 실습해보기

  1. HTML 구조 잡기 [예제]
  2. 클래스 이름 짓기 [예제]
  3. 리스트 레이아웃 [예제]
  4. 카드형 리스트 [예제]

12. 프로젝트 5일차 (2017/02/21 화)

13. 프로젝트 6일차 (2017/03/02 목)