[초보자들] S68 스터디 6회차(마지막) 후기

디기딩~디기딩~? 제대로된 HTML과 CSS를 이해를 위한 스터디! 초보 개발자도 잘하고 싶다 퍼블리싱!!
S68 스터디를 참여한 dimanche는 무엇을 느꼈을까요?

의미있는 조각 작품

지난 S68 5회차에서는 chapter3의 예제를 통해 페이지의 요소들을 큰 덩어리로 분류하고 contents를 채워보았습니다.
이어서 이번엔 큰 덩어리의 속을 예쁘게 다져보겠습니다.

혹시 미술에서 소조와 조각을 들어보셨나요?? 저도 잘 알지는 못하지만 붙이는 것과 깍는 것이라고 생각했습니다.
소조는 점토를 사용해 점차적으로 덧붙여가고 쌓아간다는 의미를 가지고 있고, 조각은 어떠한 덩어리를 도구를 사용해 깎아나가는 작업을 말합니다. 갑자기 왜 이걸 얘기할까요?
많은 사람들은 개발에 대한 이미지를 소조에 가깝게 가지고 있습니다. 그 이유는 뭘 까요? 빈 문서에 코드를 작성하면서 무언가를 만들어 나가는 과정을 생각하기 때문인 것 같습니다. 하지만 실은 덩어리를 가져와 깎아 나가는 조각에 가깝습니다.
그래서 우리는 저번 스터디에서 큰 덩어리를 깎아놓고, 이번엔 각 덩어리의 세부 항목을 깎아 나가게 됩니다.

<큰 덩어리 레이아웃>

사이트이름(box1)과 내비게이션(box2)이 너무 따닥따닥 붙어 있는 것을 각각의 덩어리에 여백(공간)을 주어 보기 좋게 다듬어보겠습니다.

.box1{
    padding-top:8px;
    padding-bottom:8px
}

책의 코드는 사이트이름(box1)에 padding-top, padding-bottom에 값을 주어서 위, 아래에 여백을 확보했습니다. 음.. 위와 아래에 똑같은 크기의 여백을 주었는데 한번에 처리할 수 없을까요??
박스 안 여백을 조정하는 여러가지 방법이 있습니다. padding-top, padding-bottom, padding-left, padding-right라는 속성을 사용해 각각의 여백을 줄 수도 있고, padding으로 모두를 표현할 수 있습니다.

• padding : 8px // TRBL에 모두 8px의 여백을 준다
• padding : 8px 0 // TB에 8px의 여백을 주고, RL에는 여백을 주지 않는다
• padding : 8px 0 8px // T에 8px, B에 8px의 여백을 주고, RL에는 여백을 주지 않는다
• padding : 8px 0 8px 0 // T에 8px, B에 8px의 여백을 주고, R에 여백을 주지 않고, L에 여백을 주지 않는다

css는 표현력이 좋은 언어였습니다. 그럼 이 중에서 그날 제 마음에 드는 방법을 선택해서 쓰면 되는건가요?? 선택 장애를 가진 저에게 굳이 왜 이렇게 다양한 표현 방법을 주고 고르라는 건가요ㅠㅠ? 도대체 다양한 표현 방법은 왜 있는 것일까요?

우리는 기획된 디자인을 보고 코드를 작성해 나갑니다. 디자인을 매의 눈으로 살펴 보면 요소의 위치, 크기, 여백, 굵기, 색상 모두 사소해 보일지라도 어떠한 의도로 필요하기 때문에 있는 것입니다.
만약 왜 필요한지 이해하기 못하고, 의도를 파악하지 못한 채로 만들면 즉각 즉각 현재의 디자인을 보여주기만을 위한 코드 작성을 하게 될 것입니다. 그러다보면 중복된 코드들에 가려져 진정한 의미(기획자의 의도 = intention)를 알 수 없습니다.

의미 曰 ‘나갈거야~~’

네~~~~ 그렇습니다. 그냥 기분따라 고르라고 제공해주는게 아니었습니다. 코드만으로도 기획된 디자인의 의도를 명확하게 파악할 수 있도록 잘 짜보라고 여러가지 방법을 제공해 주는 것입니다. 아무런 의미가 없다면, 기계어로 컴파일된 파일과 다를 바가 없겠죠.
이외에도 우리가 코드를 의미있게 작성하고 잘 파악할 수 있도록 피피티나 워드, 주석 등의 보조 수단을 활용하기도 합니다.

아무리 코드에 의미를 주고 변화율이 비슷한 것들끼리 묶어놓게 작성을 해도 자꾸만 늘어나는 코드를 관리하기엔 한계가 있습니다. 그래서 코드 중간 중간 삽입해 설명할 수 있는 주석을 많이 사용합니다. 스터디 중에 작성했던 주석을 보도록 하겠습니다.

/* 레이아웃 -----------------------------------------------*/
.box1{padding:8px 0}
.box3,.box4{padding:40px 0 30px}
.box5{padding:15px 0}
/* 사이트 이름 -----------------------------------------------*/
.site h1{margin:0;font-size:30px}
.site h1 a{color:#000;text-decoration:none}

/* 내비게이션 -----------------------------------------------*/
.box2{background-color:#7cbac1}

.menu ul{margin:0;padding:0;list-style:none}
.menu ul:after{content:'';display:block;clear:both}

.menu ul li{float:left;width:auto}

.menu ul li a{display:block;padding:15px;color:#000;font-size:14px;text-decoration:none}
.menu ul li a:hover{background-color:#75dbe7}/* 마우스오버는 모바일 환경에서 의미가 없으므로 해당 미디어에 넣는 경우가 많다. */

/* 기사 -----------------------------------------------*/
.story h1{margin-top:0;margin-bottom:20px;font-size:36px}
.story p{margin-top:0;margin-bottom:20px}
.story img{max-width:100%;height:auto}

/* 우측 메뉴 -----------------------------------------------*/
    /* 사이드 메뉴 -----------------------------------------------*/
    .sidemenu{margin-bottom:30px}
    .sidemenu ul{margin:0;padding:0;list-style:none}
    .sidemenu ul li a{display:block;padding:5px;color:#000;font-size:14px;text-decoration:none}
    .sidemenu ul li a:hover{background-color:#eee}
    .sidemenu h1{margin-top:0;margin-bottom:10px;border-bottom:2px dotted #ddd;/* 암묵적인 순서 */color:#666;font-size:18px}

    /* 추천 메뉴 -----------------------------------------------*/
    .recommend{margin-bottom:30px}
    .recommend ul{margin:0;padding:0;list-style:none}
    .recommend ul li a{display:block;padding:5px;color:#000;font-size:14px;text-decoration:none}
    .recommend ul li a:hover{background-color:#eee}
    .recommend h1{margin-top:0;margin-bottom:10px;border-bottom:2px dotted #ddd;color:#666;font-size:18px}

    /* 인기 메뉴 -----------------------------------------------*/
    .popular ul{margin:0;padding:0;list-style:none}
    .popular ul li a{display:block;padding:5px;color:#000;font-size:14px;text-decoration:none}
    .popular ul li a:hover{background-color:#eee}
    .popular h1{margin-top:0;margin-bottom:10px;border-bottom:2px dotted #ddd;color:#666;font-size:18px}

/* 우측 메뉴 끝 -----------------------------------------------*/

/* 저작권 -----------------------------------------------*/
.box5{border-top:1px solid #ddd}
.copyright p{margin:0;color:#666;font-size:14px}

어떤가요? 주석으로 표시하지 않았으면, box1, box2나 site, menu가 각각 어떤 화면요소를 지칭하고 있는지 파악하는데 꽤 많은 시간을 보냈을 것입니다.

강의를 듣는 순간에는 의미를 담은 코딩과 주석을 작성하는 것이 쉽게 느껴졌습니다. 책에 나와있는대로 설명해주시는대로 따라하기 때문이겠죠. 하지만 이는 결코 쉽지 않습니다.
막상 혼자서 하게되니.. 큰 덩어리를 나누는 것부터 시작해 중복을 제거하는 것이나 이름을 짓는 것, 주석을 작성하는 것이 생각보다 어려웠습니다. 이는 절대 만만하게 볼 것이 아닌 많은 시간을 들여 훈련을 해야겠습니다ㅠㅠ

break point

스터디에서 보고 있는 책은 반응형 웹 디자인까지 고려한 디자인이라는 것을 기억하고 계신가요?
그래서 미디어쿼리를 사용해 레이아웃을 변화시킬 조건을 주었습니다. 이 때 변화가 생기는 지점을 브레이크 포인트(break point)라고 합니다.

chapter 3 예제에서 지금까지는 기사본문(box3)과 사이드메뉴(box4)가 화면 크기에 따라 가로 또는 세로 정렬을 하는 break point만을 주었습니다. 그리고 화면의 크기를 변화시켜 출력 결과를 확인해보았습니다.

어머나!!!!!! 이 것만으로도 충분할 것이라는 예상과는 달리 아주 작은 화면이나 아주 큰 화면에서의 출력결과는 마음에 들지 않은 부분들이 보였습니다.

<아주 큰 화면과 아주 작은 화면에서의 출력 결과 이미지>

화면의 너비를 작게하면 내비게이션 메뉴에 개행이 들어가고 또한 사이트 이름, 내비게이션 메뉴, 기사의 제목이 작은 화면의 대부분을 차지해 버려 기사의 본문을 보기에 스크롤을 많이 내려야하는 문제가 생겼습니다.
화면의 너비를 크게하면 기사 본문의 내용이 한 줄에 너무 많은 글자가 들어가 읽기 힘들어지는 문제가 생겼습니다.
이러한 문제들을 가만히 두고 볼 수만은 없습니다! 그래서 break point가 더 추가했습니다.

/* 1단 레이아웃(기사본문과 우측메뉴를 세로정렬)에서 더 작은 화면 대응 ———————————————————————*/
@media(max-width:599px){
    /* 내비게이션이 한줄이 되도록 축소 ———————————————————————*/
    .menu ul li a{
        padding:10px 3px;
        font-size:11px
    }
    /* 큰 글씨 작게 조정 ———————————————————————*/
    .site h1{
        font-size:20px
    }
    .story h1{
        font-size:26px
    }
    /* 글씨 조정에 따른 여백 추가조정 ———————————————————————*/
    .box1{
        padding:4px 0
    }
    .box3{
        padding-top:25px
    }
}
/* 1단 레이아웃(기사본문과 우측메뉴를 세로정렬)에서 우측 메뉴를 2단 구조로 변경 ———————————————————————*/
@media(min-width:600px) and (max-width:767px){
    /* 우측 메뉴를 2단으로 ———————————————————————*/
    .box4:after{
        content:"";
        display:block;
        clear:both
    }
    .box4-1,.box4-2{
        float:left;
        width:50%
    }
    .box4-1,.box4-2{
        padding-right:20px;
        box-sizing:border-box
    }
}
/* 2단 레이아웃(기사본문과 우측메뉴를 가로정렬)으로 변경 ———————————————————————*/
@media(min-width:768px){
    /* 중앙 레이아웃 ———————————————————————*/
    .boxA:after{/* after는 가상 element 속성 >> 기본 속성도 입력해야한다. */
        content:"";
        display:block;
        clear:both
    }
    .box3{
        float:left;
        width:70%
    }
    .box4{
        float:left;
        width:30%
    }
    /* 기사 영역 내부 조정 ———————————————————————*/
    .box3{
        padding-right:50px;
        box-sizing:border-box
    }
}
/* 화면 양쪽에 공백을 주어 아주 큰 화면 대응 ———————————————————————*/
@media(min-width:1040px){
    /* 레이아웃 너비 고정 ———————————————————————*/
    .box1,.box2,.boxA,.box5{
        width:1000px;
        margin:0 auto
    }
}

<break point를 추가한 후 출력 결과 이미지>

화면을 아주 작게 또는 아주 크게 확인 해보기 전에 저는 반응형 웹 디자인을 할 때 구간을 몇 개로 얼마나 나누는지를 정하는 것은 오로지 레이아웃 수준에서의 조정만을 생각했습니다. ‘화면이 작아지면 요소들이 세로로 들어가고 화면이 커지면 가로로 들어가면 되는 거지 뭐~ 쉽네 쉬어~’ 라고 말이죠.
하지만 그렇게만 해서는 제가 만드는 웹사이트는 상품으로서의 quality가 너무 낮다는 것을 경험하게되었습니다. 이 상품은 공짜로 줘도 가질 사람이 없었을 것입니다.

반응형 웹을 위한 미디어 쿼리는 필수적인 것은 아닐지 모릅니다. 하지만 상품의 가치를 올리기 위해서는 필요한 것이긴 하죠.
그래서 반응 구간을 나눌 때는 레이아웃 수준에서의 조정 뿐만아니라 컨텐츠 수준의 조정도 생각을 해야할 것입니다.

퍼블리싱 완료!

스터디 때 못다한 chapter 3의 예제를 완성시켜보았습니다.
–dimanche가 완성한 chapter3 예제 보러가기!–

오예! 내려와 광대야

완성시키고 나니 기분이 좋았습니다. 혹시 책 보고 따라서 코드를 쓴거냐구요?? 하하하하하하하…. 쪼~금 많이?

처음엔 책의 도움을 받지 않고 디자인만을 보고 퍼블리싱을 해보자고 마음을 먹었습니다! 왠지 잘 할 수 있을 것 같았습니다.
그런데 페이지가 잘 안 넘어가더군요.. 또한 세세한 부분들을 많이 놓쳐 제 눈은 아직 매의 눈이 아닌 것을 실감했습니다.
책에는 이번 예제 이후로 몇 개의 예제가 더 남았습니다. 나머지 예제에서 디자인만 보고 퍼블리싱을 완료할 수 있도록 많은 연습을 해야겠습니다!

스터디를 마치며

S68 스터디를 시작하기 전 제가 생각한 강의는 교재에 나와있는 예제를 따라해보는 것 일거라고 생각했습니다. 왜 그렇게 생각했는지 지금 생각해보면, 제가 이 책을 처음으로 볼 때 그렇게 공부했기 때문인 것 같습니다.
책을 볼 때 한 문장, 한 문장.. 꼼꼼하게 보기보단 나와있는 코드를 따라치며 한 장, 한 장 넘어가는 것에 더 신경을 썼던거죠.
그리고 모든 예제를 따라쳐보고 책을 덮을 때 ‘난 이 책을 공부했어~’라고 생각했습니다.

그런데 S68 스터디를 시작 후 페이지마다 들어있는 내용의 엄청남을 느끼며 매주 놀라웠습니다. 꼼꼼하게 본다라는 수준 자체가 달랐습니다. 책을 볼 때 사용되는 조사나 형용사 그리고 설명되어지는 내용의 순서까지도 가볍게 여겨선 안되는 것이었습니다.
그래서인지 공부라고 하기엔 너무나 부족하고 타이핑 연습 수준으로 책을 본 예전의 저를 떠올려보면 부끄럽기도 합니다.

왜 저는 겉핥기 정도로 밖에 보지 못 했을까요? 아마도 컴퓨터 학문이라는 것을 얕보는 태도로 체계성을 가지지 않고 ‘공부’라는 것을 하려고 했기 때문이지 않을까요? 그렇다면 스스로 제대로된 공부를 하기 위해서 앞으로의 저에게 무엇이 필요할까요?
첫 번째, 체계성을 가진 공부 스타일
두 번째, 컴퓨터 학문을 얕보지 않는 태도
세 번째, 책의 모든 문장을 적당히 넘어가지 않고 꼼꼼하게 왜?라는 질문을 던져 보는 것
네 번째, 모든 것을 말로 설명할 수 있을 때까지 안다고 착각하지 않는 것

이 4가지 이외에도 저에게 필요한 것은 더 많을 것입니다. 또한 필요한 것이 무엇인지 알고 있다고 하더라고 단시간에 고쳐지지도 않겠죠. 제대로 된 공부라는 것을 할 수 있도록 많은 시간을 투자해 노력해야 함을 매일 되새겨야 할 것입니다.

벌써 총 6주간의 스터디가 끝이 났습니다. 앞으로 공부해야할 것들은 더~~~ 많지만…
스터디를 통해 퍼블리싱 뿐만아니라 개발이라는 것에 대해 알려주신 실장님께 너무 감사드리고, 저를 포함해 생소하고 어려운 내용들을 공부하신 모든 분들 수고하셨습니다. 그래도 알아가는 재미가 쏠쏠했지 않았나요? ㅎㅎㅎ

—S68 스터디 6회차 스터디 영상 공유

스터디 영상 1/2

스터디 영상 2/2

dimanche | bsidesoft 신입사원
좋은 개발자가 뭔지도 모르고 좋은 개발자가 되고 싶은 초보 개발자입니다.
회사에서는 열심히 교육받고 발전하는 운 좋은 개발자로 일하고 있습니다.