Bootstrap을 공부해보다

Bootstrap을 공부해보다
Photo by Windows / Unsplash

잘하는건 내 몫이 아닌 것 같으니, 뭐라도 해보자하는 마음으로 시작했다.

API 장인도 아닌데, API만 열심히 만들게 된 결과 나는 프론트엔드 관련 기술을 잘 다루지 못한다. API를 잘 만들기 위해서 각고의 노력을 하느라 그런것이 아니라 프론트엔드 기술의 난이도가 높다가 생각했기 때문이다. 기술 난도를 생각하면, 동료들과 함께 노력했어야 했는데, 나에게 당장 필요한 기술이 아니다 보니 지금까지 오게 되었다.

간단한 페이지 정도는 혼자서 만들고 싶었고, 주변에서 다들 React.js를 공부하고 있어서 ‘시류’에 휩쓸려서 함께 해보기로 했다. 나의 작은 경험을 말하자면, 등 떠밀려서 하면 그냥 하게 된다. 당연히 어디가서 웹 페이지 만드는 것으로 밥벌이는 할 수 없을 듯 하지만, 혼자서 간단한 것 정도는 만들 수 있기를 바라는 마음에 시작했다. 참고로 1주일에 대략 2시간 정도 공부했던 것 같다. 확신할 수 있는데, 2시간 넘게 해 본적은 없다.

Week1. HTML 부터 한다구? 왜?

“쉬운 것만 하니까 그런거야!”

HTML부터 해야 한다고해서, “HTML은 쉬우니까 Skip 합시다"라고 했다. 그러자 친구가 말하길 “HTML에서 쉬운것만해서 그렇다”라는 뼈있는 것 같지만, 전혀 와 닿지 않는 말을 했다.

잘 만든 프론트엔드는 예술에 가깝다. 그것이 “Art”인지 “The Art”인지는 둘째치고, 기술적인 난이도 뿐만 아니라 사용자를 고려한 UX까지 결합되어 있기 때문에 ‘프론트엔드’를 잘하는건 엄청나게 난이도가 있는 기예지만 최소한 HTML은 쉬운 것 아닌가?(나만 이렇게 생각했던 걸까?!)라고 생각했다. 그리고 태그가 어렵게 느껴지진 않았다. 그럼에도 불구하고 HTML에서 몇가지 봐야 할게 있다고 주장하고 있는, 와닿지 않는 오버 더 레인보우 같은 말을 하는 친구의 조언을 받아들여서 HTML을 하기로했다.

“그렇군, 난 쉬운 것만 했으니 이번에도 쉬운 것을 하겠어!”

나는 이론을 배워도 한 귀로 듣고 6개의 귀로 흘려보내는 특징을 가진 이론 학습에 전혀 어울리지 않는 녀석이다. 그래서 웹 관련 기술을 배워서 만들어보고 싶은 2가지를 선택하기로 했다. 그리고 앞서 쉽다고 느끼는 것은 내가 쉬운 것만 해서 그렇다는 조언을 받아들였다. 그래서 어려운 것에 도전하기 보다는 쉬운 것을 ‘쉽게 만들어’ 보는 것을 목표로 하였다(예상을 벗어나지 않는다).

첫째는 개인 ‘포트폴리오’ 페이지를 만들어 보고자 했다. 두번째는 ‘CV(a.k.a 이력서)’ 페이지를 만드는 것을 목표로 잡았다. 1주일에 1~2 시간을 내서 간단하게 클론 코딩을 하고, 코딩 과정에서 사용된 것을 간단하게 정리하기로 하였다.

“맥락은 물론이고, 의미도 불분명한 용어의 향연”

HTML을 어떻게 배우나요? 라고 질문했다. 그래서 얻은 대답이 MDN에서 제공하는 HTML: HyperText Markup Language 로 시작하면 된다는 것이다. 역시 예상을 벗어나지 않는 답변이다. 저걸로 무슨 공부를 하나 싶었다. 그럼에도 불구하고, IT 관련 업계에서 살아남아 보려고 떼굴떼굴 굴러 다녔기 때문에 간단한 HTML과 태그(철권하고 싶네)에 대한 적당한 사용방법 정도는 알고 있다. 속으로 이번주는 가볍게 소설책을 봐야지 하고 있었는데, 프론트엔드 ‘전문’ 개발자님에게 ‘시멘틱’과 ‘구성’은 꼭 봐야된다고 했다.

알지도 못하는 용어 2개를 손에 쥐게 되었다. ‘구성’이야 어려울 것 있나 싶지만, 이러한 평범한 단어가 IT 영역에 오면 전혀 다른 의미로 작동하는 경우가 있다. 예를 들어, 모래통(sandbox)은 아이들의 안전을 위해서 앞마당이나 작은 규모의 모래통을 뜻하는데, IT 관련 영역 중에서 소프트웨어 테스트 분야에서는 “소프트웨어 개발을 위한 테스트 환경”을 뜻하고, 게임 관련 영역에서는 “사용자가 구성 요소를 활용해서 의지에 따라 자유롭게 변형 및 변경할 수 있는 설계의 한 유형”으로 사용된다. 이런 단어는 맥락은 물론이고 의미도 불분명해서 올바로 검색하지 않으면 이상한 소리를 하게 된다. ‘구성’과 ‘시멘틱’에 관련도 대부분의 검색은 MDN에서 시작하고, MDN에서 해결이 안되면 구글 검색으로 넘어갔다.

“태그를 잘 사용하는게 아니라, 의미에 맞게 태그를 잘 활용하자”

나에게 ‘구성’을 알아야 된다고 했던 개발자님의 의도는 ‘website structure’를 말하는 듯 싶었다. 즉 웹페이지가 어떤 형태로 구성되어 있는지 알아야 된다는 뜻이라 생각한다. 페이지가 어떤 형태로 구성되어 있는지 생각해보니 잘 떠오르지 않았서, 또 몇가지 질문을 했는데 가을도 지난 겨울에 감을 잡았다. 예전에 회사의 디자이너 분들이 Figam나 XD를 통해서 전달한 디자인을 보면 나름의 통일감이 있었다. 아마 그 ‘통일감’을 ‘구성’이라고 하는 듯 했다. 일단 대충 잠을 감을 가지고, MDN에 있는 Document and website structure으로 공부했다. 그리고 이게 무슨 말인지 확인하기 위해서 dribbble에서 웹 페이지 디자인을 구경하면서 현실적인 지식을 채워넣었다. 동시에 이런 구성을 하는 이유를 찾아봤는데, 이 때 시멘틱(semantic)이란 단어가 등장했다.

시멘틱이라는게 업계나 학계에서 어떻게 사용되는지 알 수 없지만, 해당 문서를 읽어본 결과 ‘의미를 제대로 전달하기 위해서, 그 의미에 걸맞는 요소(구성)를 사용해야 한다’라는 것 같았다. 결론적으로 웹 페이지에서 ‘시맨틱’이란 개념을 지원하기 위해서 5개의 구성(태그)을 제공하고 있다. <header>, <nav>, {<main>, <article>, <section>, <div>}, <aside>, <footer> 였다. 일단 저 5개가 중요하다는 것은 알았기 때문에, 큰 고민없이 과련 태그에 대한 문서를 가볍게 읽었다.

결론적으로 웹 페이지를 구성 할 때 사용해야 할 태그는 의미에 맞게 사용해야 한다는 점이다. 화면에 표시되는 것과 별개로 화면을 위해서 태그를 사용하는게 아니라, 의미를 확실하게 전달하기 위해서 태그를 잘 활용해야 한다는 점이다. 이때, 누구에게 의미를 잘 전달해야 하냐면, 당연히 사용자에게 의미를 잘 전달해야 함은 더 말할 것 없고 내 홈페이지를 방문하는 우리의 봇(bot) 친구들에게도 의미를 올바르게 전달할 수 있도록 해야 한다.

Week2. 아냐, Bootstrap이 좋은 것 같아.

HTML을 배웠다고 해야 할까?, 정확히는 어떤 것을 공략해야 하는지 알았다. 나머지는 나중에 시간이 되면 해도 된다고 생각했다. JS는 못하니까 일단 그건 나중에 하기로 했다. 왜냐하면 JS를 하게 되면 뭔가 많이 배워야 될 것 같았고, 웹 페이지를 만든데 당장에 필요가 없었기 때문이다.

이렇게 마음속에 JS를 등하시 하기로 했던 나의 결정은 참으로 무식했던 결정임을 나중에 알게 되었지만 일단 그 당시 나의 찬란한 목표에 JS는 별 의미가 없었다.

그래서 뭘 배우고 싶었냐면, CSS를 배우고 싶었다. 봇 친구들에게 나의 의도를 잘 설명하는 것도 중요하지만 CSS를 사용해서 표현하는 것도 그 못지 않게 중요하다고 생각했기 때문이다.

CSS는 생각보다 기술이 복잡했다. MDN 문서를 읽으면서 이건 늪이라 생각했다. 가려진 커텐틈 사이로 보여지는 CSS를 보고 덤벼들면 그야 말로 늪이다. 그렇다면 공부를 안 하는 방법이 없으니, 덜 하는 방법을 물어봤다. 그래서 당장 사용할 수 있는 몇개를 알려달라고 했다.

그랬더니 다음과 같은 것을 배우면 된다고 말했다. 참고로 절륜한 신공을 가진 웹 개발자님이 나에게 ‘이정도’만 배우면 된다고 했다. 목록은 아래와 같은데, 학습 효율이 전혀 없는 목록이랄까? 아니면 포기를 권한다고 할까. 심지어 기본적인 CSS는 안다고 가정했다.

  • PostCSS와 SASS
  • Tailwind
  • Flex와 Grid

다가올 미래보단, 지금이 중요하다.

PostCSS, SASS만 해도 분량이 넘쳐흘렀다. 예술의 경지에 올라선 기술답게, CSS 관련 기술셋의 특성이 엄청났다. Tailwind 문서만 읽어봐도 나에게 있어서 과도한 기술 같았다. Flex와 Gird는 CSS 레이아웃을 설정하는데 탁원한 기능을 제공하는 듯 하였다. 하지만 나는 이 모든 기술과 조언을 뒤로하고 부트스트랩을 선택했다.

개별 기술을 배우는 것은 학습에 큰 의미가 있고, 미래를 보면 큰 자산이 될 것이 확실했지만, 4b 연필도 손에 쥐어본적 없는데, 유화 물감으로 그림을 연습할 순 없었다. 그래서 쉽게 접근할 수 있고, 현대 웹 개발의 기술 중 특정 영역을 포함고 있는 프레임워크 중에서 가장 많은 초급자를 보유하고 있는 CSS 프레임워크를 선택했다.

어느 누가 봐도 “이건 Bootstrap(부트스트랩)으로 만들었네?”라는 느낌을 강하게 줄 수 있도록 부트스트랩’만’ 사용해서 연습하기로 하였다. 부트스트랩으로 뭔가 해보고, 부족하면 더 배워보기로 하였다. 부트스트랩 문서를 읽어보니 뭔가 생각보다 복잡했다. 그리고 버전도 v5로 업그레이드 되었다.

이번주는 이렇게 CSS 관련 기술을 찾아보는 것으로 끝이난다. 턴을 종료한다.

Week3/4. Bootstrap 연습

부트스트랩을 2주간 연습했다. 연습 내용은 2가지다. 공식 문서에 있는 내용 중에서 일단 아래 2가지를 공부했다.

  • Layout
  • Form

Layout

Layout을 먼저 공부한 이유는 그리드 때문이다. 내 주변의 개발자들이 한결같이 말하길 그리드만 잘 잡아도 90%는 성공이라고 말해서, 그리드 부터 공부했다. 일단 90%가 성공이라는데, 당연히 성공 가능성이 높은 것을 먼저해야한다.

그리드라는게 뭔가 어렵게 보이진 않았다. 결론적으로 말해서 화면을 12줄로 나눠서 거기에 적절하게 배치하는 것을 말하는 듯 했다. 그리드의 비율을 정하는것이 핵심인 듯 해보였다. 그런데 나는 그런 근본이 없는 개발자니까 나름의 원칙을 정하기로 했다.

그리드를 사용할 때 나는 md, xl, lg만 사용하기로 했다. 나머지 몇 개 더 있는데 사실 무슨 차이인지 잘 몰라서, 3개만 사용하기로 했다. 솔직히 말해서 세세하게 공부하다 시간을 지체할 것 같아서 3개만 사용하기로 했다.

나머지는 Row나 기타 등등의 사용법이 있었으나, 별달리 중요해보이지 않았다. 실제 페이지를 만들면서 필요한 것을 배우기로 했다.

Form

데이터 입력을 위해서 Form을 사용할 수 밖에 없으므로, Form은 문서에 나와있는 모든 예제를 다 실행해서 1번 정도는 눈으로 확인했다. 일단 Form을 잘 사용해야 입출력이 원활하기 때문이다. 언제나 그렇듯이 개발을 쉽고 편하게 하려면 입출력이 명확하고 쉬워야 한다.

별다른 어려움 없이 문서에 있는 내용을 보고 공부했다. 당연히 코드를 먼저 돌려보고, 문서를 읽었다. 문서를 이해하고, 코드를 돌려볼만큼의 기초가 없기 때문이다. 그리고 눈으로 보이는 것과 내가 작성하는 것 사이에 존재하는 괴리감을 실습 과정을 통해서 해결할 필요가 있었다.

Week5. 포트폴리오 페이지 만들기

집에 있는 아이패드를 사용해서 페이지를 구성했다. Figma, XD를 사용하면 쉽다고 했는데 난 쉽지 않았다. 그리고 Figma나 XD를 할려면 뭘 또 배워야 되는 것 같아서 아이패드와 아이펜슬을 활용해서 아래와 같은 놀라운 구성안을 만들었다.

포트폴리오 페이지의 핵심은 최대한 쉽고 빠르게 구성할 수 있어야 한다는 점이다. 그리고 이러한 구성안은 디자이너가 보더니 한 300개쯤 고치고 싶다고 했지만, 나는 1개만 고쳐달라고 했다. 그러자 ‘간격’을 고려하지 않았어요. 라는 답변을 들었다.

아.. 마진과 패딩을 말하는 것 같았다. 그래서 그것을 수정해서 표시할까 했지만, 마진과 패딩을 어떻게 줘야 되는지 전혀 모르는 관계로 코드를 보면서 수정하기로 했다. 기타 몇가지 수정사항이 있었지만 별다른 특이점이 없고(299개의 아쉬움은 뒤로하자)

--_2021._12._26._16_04_39_LI

Week6. 레이아웃 작성

부트스트랩은 화면을 flexbox를 사용해서12개의 열로 나눠서 처리한다. 그래서 화면 사이즈에 맞춰서 12개의 열을 구분해야 되는데(이걸 브레이크포인트라고 하던데, ...) 일단, 그렇다고 알아두고 시작했다. PC 화면을 기준으로 했다. 만약 브레이크포인트를 잘 활용하면 화면사이즈(xl, md, sm 등)에 맞춰서 ‘알맞게’ 보여준다. 일단 12개는 중요한게 아니고 네비게이션부터 시작해보자.

네비게이션(navbar)

앞서 HTML에서 배웠듯이 네비게이션을 위한 태그인 <nav>로 시작했다. 그리고 Bootstrap 문서에 navbar와 관련된 문서가 있어서 해당 문서에 있는 예제를 사용해서 코드를 작성했다. 예제 코드에서 필요없는 부분을 삭제하고 나에게 필요한 부분만 발췌해서 사용했다.

부트스트랩을 사용할 때 가장 중요한 부분이라 생각하는데, 해당 CSS에 관련된 코드를 암기하는 것 보다는 공식문서에 있는 내용을 잘 활용하는 것이 훨씬 이득이라는 점이다. CSS를 정말로 잘하는 분들은 내가 하는 방식이 어리석어 보일지 모르지만, 문서를 잘 이해하고 해당 문서에서 제공하는 템플릿코드를 잘 활용하는 방법을 시작으로 서서히 커스텀으로 진행하는게 학습 비용을 크게 줄일 수 있는 방법이다. 생각보다 많은 오픈소스에서 공식 문서에 공을 들이기 때문에 문서를 잘 활용하자!

아래 코드가 네비게이션 코드인데, 별달리 어려운 코드가 없다. 왜냐하면 dropdown과 같은 난이도 있는 것을 전혀 활용하지 않았기 때문이다. dropdown을 사용해서 계층 구조의 메뉴를 만들까 했는데, 그런형태는 내가 선호하지 않아서 단일 매뉴로 구성했다.

button 태그가 약간 혼란스러웠다. button 태그와 관련된 작동 방법은 Bootstrap 문서에서 찾아서 이해했다. .navbar-expand-lg에 따라서 매뉴 버튼이 출력되는 것을 조절할 수 있다는 것을 button이 아닌 navgation 문서에서 찾았다. data-bs-로 시작하는 속성은 처음 보고, 해당 속성이 HTML에서 사용되고 있다는 것은 MDN 문서를 참고해서 알게 되었다.

나머지 사항은 큰 무리없이 진행할 수 있었다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="index.html">        
      <img class="rounded-circle" src="http://via.placeholder.com/50x50" alt="Profile Picture">
      Portfolio
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" 
    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link activate" aria-current="page" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="portfolio-overview.html">Portfolio</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

하단의 footer를 작성했다. 마진과 패딩의 경우 부트스트랩 홈페이지에서 제공하는 것을 참고해서 사용했다. 결론적으로 말하면, 마진과 패딩만 잘 잡혀도 그럴듯한 혹은 정렬된 형태의 페이지를 작성할 수 있다. 나머지 요소는 비율을 고려해서 배치를 잘해야 되는데, FigmaXD의 경우 이러한 배치를 자유롭게 할 수 있다는 점에서 레이아웃을 작성하는 부분 정도까지는 YouTube 등을 통해서 배워둘 필요가 있다고 생각했다. 그래서 욕망의 항아리에 Figma를 넣어두었다.

부트스트랩의 경우 data-ba-* 속성을 적극적으로 활용하기 때문에 문서를 참고할 때 해당 data-bs-* 속성에 유의해야하며, Font Awesome의 경우에도 문서에서 제시하는 형태를 고려해서 작성하였다. 다시 한번 말하지만, 문서에 적혀있는 것은 꼭 읽어보자. 생각보다 공식 문서에 있는 사소한 내용 때문에 코드 구조를 이해 못 할 수 있다.

<footer class="bg-light py-4">
    <div class="container">
        <div class="row">
            <div class="d-flex align-items-cetner mb-2">
                <div class="fa-layers fa-fw fa-2x mr-1">
                    <i class="fas fa-circle text-muted"></i>
                    <i class="fas fa-code text-white" data-fa-transform="shrink-10"></i>
                </div>
                <h5 class="m-0">Code</h5>
            </div>
            <ul class="list-unstyled">
                <li><i class="fab fa-fw fa-github text-muted"></i><a href="#0">Github</a></li>
                <li><i class="fab fa-fw fa-codepen text-muted"></i><a href="#0">CodePen</a></li>
                <li><i class="fab fa-fw fa-stack-overflow text-muted"></i><a href="#0">Stack Overflow</a></li>
            </ul>
        </div>
    </div>
</footer>

컬럼 분할

화면 사이즈에 맞춰서 유기적으로 보여지기 위해선 브레이크포인트를 작성해야 하는데, 이때 12칸을 기준으로 화면을 설정하게 된다. 몇번 연습해본 결과 PC 화면에선 3칸씩, 아이패드 화면에선 6칸씩, 스마트폰에선 12칸을 사용하기로 하였다. 컬럼 분할의 경우 큰 어려움은 없었다. 왜냐하면 전혀 복잡한 화면을 만들고 있지 않기 때문이다. 페이지에 포함되는 요소들이 많아지면 복잡도가 증가할 것으로 생각된다. 그래서 복잡하지 않은 화면을 만들 생각이다.

<div class="row mb-4">
  <div class="col-12 col-md-6 col-xl-3 mb-4">
    <a href="portfolio-item.html">
      <figure class="figure">
        <img src="http://via.placeholder.com/510x400" alt="Protfolio Item Heading" class="figure-img img-fluid img-thumbnail">
        <figcaption class="figure-caption">Portfolio Item Heading</figcaption>
      </figure>
    </a>
  </div>
  <div class="col-12 col-md-6 col-xl-3 mb-4">
    <a href="portfolio-item.html">
      <figure class="figure">
        <img src="http://via.placeholder.com/510x400" alt="Protfolio Item Heading" class="figure-img img-fluid img-thumbnail">
        <figcaption class="figure-caption">Portfolio Item Heading</figcaption>
      </figure>
    </a>
  </div>
  <div class="col-12 col-md-6 col-xl-3 mb-4">
    <a href="portfolio-item.html">
      <figure class="figure">
        <img src="http://via.placeholder.com/510x400" alt="Protfolio Item Heading" class="figure-img img-fluid img-thumbnail">
        <figcaption class="figure-caption">Portfolio Item Heading</figcaption>
      </figure>
    </a>
  </div>
  <div class="col-12 col-md-6 col-xl-3 mb-4">
    <a href="portfolio-item.html">
      <figure class="figure">
        <img src="http://via.placeholder.com/510x400" alt="Protfolio Item Heading" class="figure-img img-fluid img-thumbnail">
        <figcaption class="figure-caption">Portfolio Item Heading</figcaption>
      </figure>
    </a>
  </div>
</div>

Form

.form-label.form-control을 잘 활용하면 손쉽게 작성할 수 있다. 복잡한 형태의 폼은 다른 사이트를 참고하기로 하였고, 기본적인 형태만 사용해서 간단한 메시지 등록 기능만 작성하였다.

<form class="mb-4">
    <div class="row">
        <div class="col-12 col-md-6">
            <div class="mb-3">
                <label for="name" class="form-label">Name</label>
                <input id="name" type="text" class="form-control" placeholder="Enter your name">
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input id="email" type="email" class="form-control" placeholder="Enter your name">
            </div>          
        </div>
        <div class="col-12 col-md-6">
            <div class="mb-3">
                <label for="message" class="form-label">Message</label>
                <textarea id="name" type="text" class="form-control" rows="4" placeholder="Enter your message"></textarea>
            </div>
        </div>        
    </div>
</form>

완성

부트스트랩을 사용해서 간단한 포트폴리오 페이지를 만들었다. 하부 페이지 및 프로젝트 세부 페이지까지 완성했다. 그리드를 기반으로 한 구성요서 배치, 마진과 패딩, 폼 구성 등과 같은 간단한 것을 배울 수 있었다. CSS가 생각보다 범위가 너무 커서 걱정했는데, 부트스트랩을 해보니 내가 꼭 배워야할 CSS 범위가 많이 줄어든 것 같다. 남은 CV 페이지를 만들어보고, 알게되거나 느낀점이 있다면 간단하게 남겨보겠지만, 대부분의 것들이 문서에 잘 나타나있어서 크게 다른점은 없을 듯 싶다. CV의 경우 내가 배운 부트스트랩 기술을 연습하는 용도라 할 수 있다. 다음에 SASS나 PostCSS 등에 도전하게 되면 그 때 다시 간단한 글을 작성할 예정이다. - 끝 -

screencapture-127-0-0-1-5500-index-html-2021-12-27-01_33_56