[Dev] 비개발자를 위한 8주간의 HTML/CSS 수업 회고

 

 

 

---

개요

• 계기 : 올해는 지식을 나눌 수 있는 한 해가 되길 바랐고, 누군가를 가르치는 것에 대한 흥미가 생기던 참이었습니다.
• 대상 : 원래는 극소수 정예로 진행하려고 했는데 뜻밖의 성원(?)으로 5명의 스터디원이 모집되었습니다.
• 기간 : 2017/01/02~2017/03/02 (8주), 매주 화/목 PM 7-8

 

 

---

모토

• 중도하차 할 생각이라면 No!
• 무료 수업이라고 해서 나도 한 번 들어볼까? 하는 안일한 생각이라면 받고 싶지 않았습니다. 최소한 왜 듣고자 하는지 이유가 하나쯤은 있으신 분을 원했습니다. 단순 호기심으로 오셨다가 중도 하차하거나 결석으로 수업 분위기를 흐리고 싶지 않았습니다.
• 수업 시간은 1시간 내외
• 우리의 집중력은 생각보다 길지 않다는 걸 잘 알고 있습니다. 그래서 최대한 50분 정도로 마무리하고 싶었습니다. (잘 지켜지지 못했지만 ㅠㅠ) 하다 보면 이것도 저것도 다 중요한 것 같아서 하나라도 더 알려주고 싶은 마음에 1시간 반 이상 한 적도 더러 있었습니다. 분량 및 수업의 완급 조절이 정말 어렵다는 것을 많이 느꼈습니다. 적당한 시간에 적당한 예제와 실습을 병행하면서 흥미를 끝까지 이끄는 것은 매우 어려운 일이었습니다.
• 교재 X, 숙제 X
• 교재 구매를 강요하지 않았고, 제가 개인적으로 추천하는 도서를 2권 구비하여 자유롭게 볼 수 있도록 했습니다.
• 저의 지난 스터디 경험으로 미루어 볼 때, 각자 바쁜 일정 속에 시간이 쪼개서 임하는 스터디에서 짐을 주기 싫었습니다. 대신 스터디 시간 내에 최대한 집중에서 얻어 가길 바랐습니다. 따로 시간을 내서 하게끔 뭔가를 자꾸 주면 부담이 되고 전체적인 흥미가 떨어질 것 같았습니다. 그런데, 숙제가 없어서 아쉬웠다는 피드백도 있었습니다.

 

 

 

---

후기

 

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

 

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

 

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

 

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

 

 

---

회차별 상세 후기

수업 자료 : https://www.slideshare.net/ohyejin91/presentations

말로 많이 보완해서 슬라이드 자체에는 많은 내용이 담겨있진 않습니다.

아래 상세 후기는 수업이 끝난 직후에 적어 놓았던 내용입니다.

 

 

 

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

• 생각보다 내 말이 빨랐음
• 개발환경 셋팅하는게 시간이 오래 걸렸음
• 닷홈-FTP 연계문제
• SH님이 많이 도와주심
• 내가 이 부분 시뮬레이션 안 하고 수업 들어온게 문제였음 (반성)
• 생각보다 우왕좌왕 말을 더듬었던 것 같음
• 왜 이 수업을 듣는가?
• HG : 어떻게 가르치는지 궁금했다 (패기보소)
• SH : 주먹구구로 알고 제대로 배워본 적이 없어서
• JS : 포트폴리오 사이트 만들기 위해
• MJ : 요소 검사를 보다 더 잘 쓰기 위해, 디자인 가이드 웹 페이지 만들고 싶어서, 포폴 만들고 싶어서
• SH : 전공 때 적응 못해서 힘들었는데 개발 입문으로 html/css가 적절할 것 같아서

 

 

 

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

• 바빠서 준비 많이 못했는데 1회차보다는 잘 한 것 같다.
• block요소와 inline요소을 약간 어려워 했다 (MJ)
• 실습 시간을 넣은 건 잘 한 것 같다.
• PPT에는 없지만 들여쓰기(brackets > beautiful.io), 주석 넣는 방법을 설명했다.
• 집중력이 떨어지지 않게 완급조절을 잘 해야 할 것 같다.
• 다음 수업 list 분량이 많지 않으니 1,2회차 섞은 실습예제를 준비 해야겠다.

 

 

 

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

• 실습 위주의 수업을 도전
• ul li : http://codepen.io/zineeworld/pen/YNPEpN
• ol li : http://codepen.io/zineeworld/pen/pRvdNq
• dl dt dd : http://codepen.io/zineeworld/pen/egmepX
• 네이버 메인에서 리스트를 활용했을 것 같은 부분을 찾아보기
• 실습 결과
• 다른 사람들은 img alt 값 넣는거 대부분 빠트림
• 요구사항을 정확히 다 반영하는 집중력이 필요함
• 처음 코드를 쳐보는 사람에게는 시간이 짧게 느껴지기도 함
• 오늘도 역시 닷홈이 말썽을 부림
• .html 파일을 개인 슬랙으로 받음
• 실습을 하다보면 적극적인 참여는 되지만 약간 산만한(?) 자기 할 거에 집중하느라 내 말을 못 집중하는 것 같기도 함
• 지난 수업에 배운 것과 합쳐서 연습문제를 낸 것은 잘한 것 같음, 앞으로도 복습할 수 있도록 해야겠음

 

 

 

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

• 다른 분들의 강의를 듣고 가면 그대로 말을 옮기는 꼴 밖에 되지 않을 것 같아서 (핑계…) 안 보고 들어갔는데 이번에는 이지스퍼블리싱 저자 강의와 생활코딩 강의를 미리 들어봤다. 역시 생코는 진리. 갓고잉님!! 진짜 아무것도 모르는 사람 입장에서 설명 잘 해주시는 것 같다. 차분한 목소리 역시 최고!
• [생활코딩]
• 완전 plain text에서 구조를 잡아가는 과정을 라이브 코딩으로 보여주는 방식이 좋음
• 과거에는 페이지를 테이블로 레이아웃을 잡았다. html코드가 굉장히 너저분해짐
• w3c 테이블을 쓰지 말라고 권고. 레이아웃은 css를 통해서 잡아라
• 생각보다 사람들이 실습을 굉장히 잘 따라왔다

 

 

 

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

• 새벽 3시까지 예제 다 만들어 왔는데 코드펜이 갑자기 서버 장애로 접속이 안 됐다 ㅠㅠ
• 얼결에 라이브 코딩 수업을 했는데 분량이 많아서 이렇게 하길 잘한 것 같다.
• 6시반부터 8시까지 쫄쫄 굶으며 정해진 분량을 모두 마쳤다.
• 시간을 준수하도록 해야겠다. 내 욕심으로 학생들을 힘들게 할 순 없으니.

 

 

 

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

• css 첫 수업이었다. 이젠 재밌어질 줄 알았는데 생각보다 이론이 많았다. 저녁을 바로 먹고 진행해서 인지 졸려 보이는 사람도 있었다. 무언가 설명을 하고 있을 때 화면이나 칠판을 쳐다보고 있지 않으면 의기소침해진다. 새삼 수많은 선생님/교수님/강사님들이 존경스러웠다. 이론보다는 실습에서 배우는 게 훨씬 나을 것 같아서 스케줄을 대폭 조정하고 다음 시간에는 라이언 그리기를 해보려고 한다. 1월 안에 대략적인 css를 훑고 다음 달에는 프로젝트를 진행하는 걸로 경로를 변경했다. 교수법에 대해서도 고민해야 한다는 게 참 어려우면서도 소중한 경험인 것 같다.

 

 

 

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

• CSS Drawing Day
• 튜토리얼 : http://zinee-world.tistory.com/category/CSS%20Drawing/Tutorial
• 학생들이 즐거워했다. 마지막에 transition으로 커스텀 하는 부분에서 생각보다 다양한 결과물이 나와서 재미있었다.

 

 

 

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

• 뭐 할지 정함. 헤더 간략히 맛보기 하는데도 30분 씀. 앞길이 걱정….. 핳
• 시안 결정 : https://www.devonstank.com/
• 적절한 reset.css를 사용하여 브라우저 기본 css들을 제거한다.
• float clearing1 - float를 사용할 때는 부모 요소에 overflow: hidden을 해야 함 (예제 : http://codepen.io/zineeworld/pen/LWZGod)
• transition을 사용한 자연스러운 호버 효과
• css 적는 순서 (정답은 아니지만 제가 쓰는 방법)
• 박스 사이징, 포지션, 디스플레이, 마진/패딩, 가로/세로, 테두리, 배경색, 글꼴 요소, 그 외 꾸밈 요소, 오버플로우, 지인덱스

* box-sizing
* position
* top / bottom / left / right
* display
* margin / padding
* width / height
* border / border-radius
* background
* font-family / font-size / font-weight / font-style / color
* text-decoration / text-transform
* transition
* overflow
* z-index

 

 

 

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

• project - header
• 이미지 네이밍 (사내 컨벤션에 따라 다를 수 있음)
• 이미지 img_xxx
• 아이콘 ico_xxx
• 버튼 btn_xxx
• 불릿 bu_xxx
• 배경 bg_xxx
• background-property
• background-color
• background-image
• background-repeat
• background-position
• background-size
• css attr selector
• [attr|=value] attr이라는 속성값을 가지고 있으며, 그 속성값이 정확히 "value"이거나 "value"로 시작하면서 "-"(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다. 이 선택자는 언어 서브코드가 일치하는지 확인하고자 할 때 사용할 수 있습니다.
• 웹 폰트 사용방법
• 영문 : https://fonts.google.com
• 한글 : https://fonts.google.com/earlyaccess

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

 

 

 

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

• project - intro, about
• <i>를 활용한 pc/mobile 줄바꿈
• display: table | table-cell
• position: relative | absolute
• z-index, opacity
• float clearing2 - float 대신 display: inline-block 을 사용하는 방법도 있다. 이 때 요소간의 공백이 생기는데 font-size: 0 을 적어주면 공백없이 요소들이 옆으로 붙는다. font-size는 상속이 되므로 그 영역 안의 폰트들은 모두 0이 되어 버리니, 필요한 요소는 따로 font-size를 지정해 주어야 한다.
  예제 : http://codepen.io/zineeworld/pen/LWZGod
• margin: 0 10px; width: calc(20% - 20px);
• 인덱스 풀페이지 예제 : http://codepen.io/zineeworld/full/JEgbVa/
• 학생들이 어려워 함

 

 

 

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

• project - video, album, contact, footer
• 손코딩 후 코드펜에 실습해보기
• 1. HTML 구조 잡기 http://codepen.io/zineeworld/pen/wgZaLp
• 2. 클래스 이름 짓기 http://codepen.io/zineeworld/pen/GrLpgv
• 3. 리스트 레이아웃 http://codepen.io/zineeworld/pen/zNXvzG
• 4. 카드형 리스트 http://codepen.io/zineeworld/pen/PWgPOe

 

 

 

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

• 내가 전해준 예제 파일을 기본으로 컨텐츠, 에셋을 바꾸고 스타일을 조금씩 변형해보는 실습 시간
• 예제 사이트

• 

 

 

 

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

• 각자 완성된 사이트를 닷홈에 올리고 공유
• 5명 중 3명 완성, 1명 진행중, 1명 해외출장