HTTP/CSS | div 와 CSS를 사용한 웹페이지 % 반응형 레이아웃 연습

현대 웹페이지의 레이아웃은 상당히 중요하다.

웹의 기획자들은 2000년대 후반에 스마트폰의 보급이 시작되면서 반응형웹 같은 새로운 UX/UI 개념을 적용해야 했고 하나의 컨텐츠를 다양한 장치와 미디어에 최적화해서 보여줄 수 있는 기술이 필요하게 되었다.

쉽게말해 사용자가 웹페이지 하나를 볼때 어떤 스크린에서 봐도(스마트폰의 5인치 화면부터 80인치 TV까지) 잘 보여야 한다는 말이다. 이런 기준을 맞추는 것은 생각보다 힘든데 사람들이 사용하는 매체에 따라 전혀 다른 상황에 놓이게 때문이다. 스마트폰을 누워서 손 앞에서 사용하는 것과 3미터 떨어진 80인치 TV에서 보거나 또는 노트북이나 데스크탑 PC에서 보는 상황은... 세밀하게 보면 전혀 다른 환경이다. 그런 매체들이 많음에도 불구하고 해석을 잘하는 것은 인간의 눈의 적응 범위가 높다는 것을 말해주는 것이기도 하다.

MS-DOS와 윈도우즈95를 사용하던 시대에는 이런 고려가 필요없었다. 어떤 앱이라도 PC의 모니터에 맞춰서 제작하면 문제가 없었다. 그런데 현재는 앱을 하나 제작하기 전에 어떤 미디어에서 재생될 것인가에 대한 부분을 명확히 하지 않으면 안된다.

반응형 웹 디자인(responsive web design)은 여러 매체에 대응하는 대표적 방법으로 현재는 웹과 스마트폰의 앱에 널리 쓰이고 있다.

레이아웃 연습하기

코딩을 하는 방법은 지식이지만 실제로 코딩하는 기술을 체득하기 위해서는 연습을 해야한다. 아무리 많은 지식을 알고 있어도 그 지식을 실전에 적용하는 테크닉(기교)은 얻지 못한다. 테크닉이 없으면 실전은 쉽지 않다. 마치 악기연주자가 연습을 안한채 악보만 읽다가 연주회에 나가는 것과 같다.

(드롭박스 창업자 드류 휴스턴: 프로그래밍은 악기 연주와 같다)

이번 포스팅은 HTML/CSS 레이아웃의 연습 방법과 내용이다.

현대의 웹사이트는 div 태그를 유난히 많이 사용한다. div 태그와 span 태그의 차이점에 대해서 모른다면 검색해서 차이를 알아내길 바란다.

div는 블록이고 span은 인라인으로 실제 많이 쓰는 태그는 div 이다.

span은 태두리 없이 말그대로 라인을 따라가는 형태다 보니 레이아웃이 직관적이지 않다.

반면 div는 레고처럼 블록을 가지고 만들기 때문에 직관적이고 더 관리가 쉬워 보인다.

블록을 가지고 놀면 자연스럽게 웹페이지 레이아웃의 연습이 된다. 그런데 블록이 잘 보이지 않으니까 색상을 넣어준다.

아래 캡쳐와 같이 색상을 알록달록하게 넣은 블록으로 연습을 한다. 보기엔 단순해 보이지만 각각의 블록을 하나씩 정의하면서 전체 틀에 끼워맞춰야 한다. 레이아웃을 잡는 것은 블록게임하고 비슷하다. 현실의 블록게임과 차이가 있다면 컴퓨터 화면안에는 현실과는 다른 법칙이 있다는 점이다. 현실에는 중력의 법칙을 적용한 블록을 쌓는 것이지만 웹페이지에서는 HTML/CSS 가 법칙이다.

위에서 부터 만들어보면 아래와 같다. div 나 header나 같은 블록이다. 헷갈리지 않게 주의한다.

    <div class="header">
        Title
    </div>
    <header>
        This is header
    </header>
    <div class="container">
        <div class="item item-1">a</div>
        <div class="item item-2">b</div>
    </div>

이 위의 상위 태그는 body와 html 이 있다. html에 별도의 스타일을 적용하지 않았다면 실제적으로 디자인이 관여되는 것은 body 부터인데 body 안에도 margin 과 padding 등 화면에 영향을 미치는 요소가 들어있다. 비슷하게 p 태그와 함께 초기화시켜준다. 아래에서 font-size rem 단위는 html 에서 설정한 폰트사이즈다. (브라우저 기본) 필자의 경우 2560 x 1440 32인치 데스크탑에 엣지 브라우저를 사용하는데 1 rem은 너무 작아보인다.

body, p{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.2rem
}

여담으로 영문과 한글은 사이즈 차이가 좀 있다. 영어권 사용자들이 선호하는 아이폰의 글씨 크기가 작은게 괜히 그런게 아니라 서양인들이 읽는 영어 활자가 원래 작다. 있다면 덩치가 큰 서양인이 paperback(소프트커버) 책을 들고 다니는 것을 본적이 있다면 무언가 언밸런스하게 느껴진다.

알파벳은 a b c d 이렇게 나열되기 때문에 하나의 글자가 담는 정보가 적다. 그런데 한글은 초성 중성 종성까지 세개의 글자가 조합되기 때문에 한글자를 인식하는 시간이 더 걸린다. 알파벳은 한글자를 인식하기 위해 머리속에서 고려하는 가지수가 26개(대문자까지 52개) 이고 한글은 최대 11,172개 조합을 파악해야 한다. CPU로 따지면 글자 하나에 20배의 검색 처리가 추가된다.

이런 단순한 이유만 가지고 한글과 영어의 우위를 결정하지 않는다. 언어는 각기 장단점이 있다. 컴퓨터 언어인 어셈블리어, C언어, 자바스크립트를 비교하면 인간의 언어에 대한 이해도 높아질 것이다.

이 때문에 한글은 글자크기가 커야 된다. 같은 이유로 한자를 사용하는 중국이나 일본의 글자체도 작으면 보기 힘들다. 눈이 침침해지는 어르신들이 갤럭시 노트를 많이 사용한 것도 한글은 크기가 어느정도 있어야 쾌적하기 때문이다.

역시 삼성이 히트친 것은 이유가 명확하다.

초기화는 주로 기본으로 설정된 여백이나 폰트 사이즈 등을 세팅하기 위해 사용하는데 유명한 초기화 코드로는 Eric Meyer's Reset 이 있다. 조금 복잡하게 보이는 코드지만 아래 링크를 타고 들어가면 복사할 수 있다. Eric의 코드를 참고하여 자신만의 초기화 코드를 커스터마이즈 하는 것도 하나의 방법이다.

CSS 자체가 스타일이기 때문에 자신의 스타일을 만드는게 제일 좋다. C++이나 자바의 코딩은 스타일이랄게 없지만 HTML/CSS 는 나름의 디자인적 감각이 들어간 스타일을 추구할 수 있다. 코드에 본인의 개성을 드러낼 수 있다는 것이 프론트엔드의 장점이다. 프로그래밍 하는 사람들도 배워야 할 부분이다.

CSS Tools: Reset CSS (meyerweb.com)

CSS Tools: Reset CSS

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter

meyerweb.com

body를 초기화 시키고 그 다음에 컨테이너 <div id="container"></div> 를 만들어서 메인 프레임으로 활용하는 것도 많이 사용한다. body가 가진 요소를 건드릴 필요가 없으니까 안전하다. CSS가 잘못되면 다시 container 만 고치면 된다.

* 다음 div 태그로 반응형 웹페이지의 몇가지 요소를 적용해본다.

    <div class="container2">
        <div class="con con2-1"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae enim dolore porro nobis aliquam, ratione vel reprehenderit vitae repellat beatae, ab fuga! Eos nihil atque nesciunt fugiat ullam ducimus neque.
        </p></div>
        <div class="con con2-2"><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus animi temporibus voluptatum maiores magni alias harum. Recusandae natus voluptate nam eius ipsa praesentium voluptates autem. Voluptatibus est doloribus earum porro!</p></div>

    </div>
    <footer>Footer</footer>

반응형 웹 디자인이라는 것은 꽤 심오한 부분이 있어서 별도로 공부를 좀 해야한다. 공부를 하는 과정에 디자이너들의 이야기를 들을 수 있을 것이고(보통 디자이너들의 UI 강의에 나오니까) 프론트엔드 프로그래머들의 관점도 흡수할 수 있다.

프로그래머(일반 애플리케이션을 개발하는)는 알고리즘에 강한 반면 디자인에 대한 경험이 좀 부족하여 프론트엔드 코드를 잘 신경쓰지 않는 경우가 있는데 반응형 웹 디자인도 알고리즘을 운영하는 과정으로 본다면 프로그래밍을 하는 입장에서 상당히 도움이 된다.

사실 블록 쌓기는 인간이면 본능적으로 좋아하는 일이다. 테트리스를 시작으로 많은 퍼즐게임들이 블록을 옮기거나 끼워맞추는 것을 일이 아니라 놀이로써 즐기는 거다. 역사속에서 인간은 원래부터 블록쌓기를 해왔다. 땅을 측량하는 일 부터 이집트의 피라미드를 쌓는 일 등 인간이 하는 많은 일이 블록쌓기와 관련되어 있다.

(우리가 사랑하는 로켓배송 쿠팡의 물류센터 직원은 블록쌓기가 직업이다)

조금 성격이 다르지만 GUI 프로그램에서는 다양한 레이아웃 객체를 사용해서 디자인 한다. 이것도 크게 보면 웹페이지의 UI 디자인과 다르지 않다. 다만 PC나 모바일같이 특정 플랫폼을 정해놓고 만들 뿐이다. 게임 같은 경우 확실하게 모바일이면 모바일, PC면 PC, 닌텐도면 닌텐도 정해놓고 만드는 것이다.

사람들이 유독 웹페이지는 어느 컴퓨터 어느 스크린에서도 똑같이 작동해야 할 것을 기대하니까 일이 커진다. 사실 하드웨어 제약사항이 차이가 많다.

아래는 max-width 가 1000px 인 페이지의 레이아웃 CSS다. margin을 auto로 두면 가운데로 정렬한다.

.container2{
    font-size: 0;
    max-width: 1000px;
    margin: 0 auto;
    background-color: pink;
}
.container2:after{
    content: '';
    display: block;
    clear: both;
}
.con{
    float: left;
    vertical-align: top;
    background-color: darkgrey;
    margin: 0 auto;
    padding: 0;
    font-size: 0;
}
.con2-1{
    background-color: deepskyblue;
    width: 30%;
    font-size: 1rem;
}
.con2-2{
    background-color: gold;
    width: 70%;
    text-align: right;
    font-size: 1rem;
}
footer{
    max-width: 1000px;
    margin: 0 auto;
    clear: both;
    background: tomato;
}

간단히 왼쪽과 오른쪽으로 나누는데 왼쪽에 사이드바가 들어갈 수도 있고 아니면 둘다 섹션으로 사용할 수도 있다. 페이지의 성격에 따라 다를 것이다. 이 블로그와 같은 경우 사이드바에 메뉴가 들어갈 것이다.

왼쪽과 오른쪽을 섹션으로 나눈다면 퍼센트의 비중으로 나누는 방법이다. float 를 사용하는 방법 등이 있는데 그전에 % 비율을 사용한 방법을 가지고 놀아본다.

코드를 작성하는 것은 중요한데 그전에 블록들을 움직여 보고 직관을 얻는 것이 더 중요하다. 내용과 목적을 이해하게 되면 코드는 머리속에서 저절로 그려질 것 이다.