부트스트랩^Bootstrap은 작업자가 초보자이든 전문가이든 상관없이 최근 사이트나 앱의 구조^scaffold를 빠르고 쉽게 생성할 수 있는 소스 코드를 제공합니다. 점점 더 많은 개발자들이 개인 툴박스에 이 프레임워크를 넣고 있습니다.

부트스트랩에는 어두운 이면도 있습니다. 정리되지 않고 시맨틱하지 않으며 재사용 할 수 없는 마크업을 쉽사리 작성할 수 있습니다. 이렇게 작성해도 모든 브라우저에서 제대로 보여지긴 하지요.

저는 이 글에서 부트스트랩을 사용해 견고하고 시맨틱한 코드를 작성하는 방법에 대해 설명할 것입니다. 부트스트랩의 최신 버전에는 Sass를 공식적으로 탑재하고 있습니다. 이 글의 목적을 달성하고자 Sass의 가장 강력한 기능 중에 하나인 @extend 지시자를 사용할 것입니다.

시맨틱에 관하여

우선 무언가를 ‘시맨틱’하게 만든다는 말이 무슨 뜻인지 알아봅시다. HTML 문서는 정보의 계층구조적 관점에서 콘텐츠를 묘사합니다. 누구나 코드를 읽고 무엇을 말하고 있는지 알 수 있어야 합니다. 어떻게 보이는가는 해당하지 않습니다.

CSS 특히 CSS 프레임워크의 인기가 높아지면서 독자/개발자의 입장보다 CSS 문서 자체에 신경을 쓰며 HTML을 작성합니다. 요즘 웹사이트 소스 코드에서 이와 같이 작성된 HTML 마크업을 보는 것은 흔한 일이죠.

부트스트랩의 CSS 파일은 위의 코드가 무엇을 할지 압니다. 열이 모두 2개 있고, 한 열에 행이 3개 있으며, 나머지 열에 100% 너비가 적용된 행 1개가 있다는 것을 말이지요. 부트스트랩을 다뤄본 개발자라면 이것을 쉽게 파악합니다. 하지만 이 프레임워크를 사용해 본 경험이 없는 사람이 보았다면 어떨까요? 위의 HTML 코드들은 왜 있는 걸까요? 어떤 정보가 담겨 있죠? 이 마크업은 쓸만한 정보를 보여주지 않습니다.

시맨틱 마크업은 보이는 외관보다 콘텐츠를 설명하는 코드입니다. 위의 코드를 다음과 같이 의미가 담긴 코드로 작성할 수 있습니다.

부트스트랩이 시맨틱한 스타일을 어떻게 반영할까?

여러분은 내장된 클래스없이 어떻게 부트스트랩을 사용할지 궁금해할 것입니다. Sass @extend 기능의 힘을 사용해서 이것을 해결할 수 있습니다.

Sass 문서:

@extend는 확장된^extended 선택자가 있는 스타일시트 안에 어디에서나 확장하는^extending 선택자를 넣어서 작동합니다.

 
이는 시맨틱한 선택자를 사용하면서 부트스트랩의 선택자를 확장할 수 있는 장점을 취한다는 의미입니다. 어떻게 적용하는지 봅시다.

재사용성^Reusability

이 방법의 또 다른 장점은 가독성과 재사용성 모두를 가진 구성요소^components를 만든다는 것입니다. 예를 들어 행과 열 밖에서 필요할 때마다 author 구성요소를 반복해서 만들지 않아도 됩니다. 대신 구축하기 쉽도록 구성요소 각 부분의 이름을 알기 쉽게 지어주세요. 전체 사이트에서 일관적으로 보이는지 부트스트랩을 통해 확인할 수 있습니다.

이식성^Portability

부트스트랩이 최고의 프레임워크들 중에 하나일지라도 나중에 다른 프레임워크로 이전하거나 아예 자체 프레임워크를 제작할 때가 올지 모릅니다. 위에 대략 서술한 방식으로 이와 같은 작업을 할 수 있습니다. 왜냐하면 CSS에서 여러분의 마크업을 군더더기 없이 깔끔하게 분리할 수 있기 때문입니다.

툴벨트^toolbelt를 매세요.

부트스트랩의 Sass 버전을 아직 사용해보지 않았다면 반드시 사용해 보세요. Github 페이지에서 시작하는 것이 좋습니다.

Sass가 유일하게 놀 거리는 아닙니다. HTML과 CSS에서 다음 단계의 시맨틱을 진정으로 알고 싶다면 BEM이나 SMACSS 같은 명명법^{naming convention}을 권해드립니다. 여러분은 이것으로 선택자를 표준화하고 기억하기 쉽게 만들 수 있습니다.

이제 나가서 확장하세요

부트스트랩에 놀랍도록 강력한 스타일 세트가 있습니다. 그렇다 하더라도 코드를 대충 꿰 맞추어서 마크업의 품질을 상실할 수도 있습니다. Sass의 @extend 지시자를 사용하면 콘텐츠와 개발자 모두를 위해 의미를 명확히 전달할 수 있는 마크업을 작성할 수 있습니다.

브래드 바로우 Brad Barrow

트위터 @foxwisp

브래드 바로우는 호주 멜버른에 거주하는 프론트엔드 개발자이고 디자이너이며 SitePoint팀과 함께 작업하고 있다. 아침 식사로 자바스크립트/CSS를 먹으며 계속 변화하는 프론트엔드 세계의 정상에 서있고자 노력한다.

댄 시더홈 Dan Cederholm

웹디자이너를 위한
SASS

CSS 마스터, 댄 시더홈이 전수하는 SASS 노하우!
SASS로 스마트한 CSS 고수가 되자!

책 구매하기책 미리보기책 상세설명

지난 9월 4일, 포스틸 타워에서 개최된 온라인비즈니스 전략 컨퍼런스. 연사로 강단에 오른 미디어유 이지선 대표의 푸념을 들으면서 동지를 만난 듯 반가우면서도 한편 씁쓸했다.

소비자와의 커뮤니케이션을 중요하게 생각한다면서도, 광고성 메시지의 주입식 전달에서 헤어나지 못하고 있는 기업들. 그들의 최대 허점은 새로운 것에 대한 두려움이다. 빠르게 진화하는 온라인 커뮤니케이션 놀이터에 동참하고싶지만 잘 모르기 때문에 마냥 두려운 것이다. 교육과 컨설팅이 이뤄진 후에도 머뭇거림은 쉬 가시지 않는다.  

”다들 기업 블로그를 운영한다고? 내 주변에선 못 봤는 걸.”
”아휴~ 난 그럴 시간도 돈도 없어.”
”광고를 해야지, 그런 게 효과 있겠어?”
”우리는 커뮤니케이션 필요없으니, 홈페이지만 예쁘게 만들어 줘”

결국, 모든 것이 원점! 확고한 웹1.0 마인드 앞에선 웹2.0 세상을 증명하는 명백한 근거(통계수치와 실사례)들도 모두 물거품이 된다. 그러나 그들이 외면하며 질끔 눈감아 버린 온라인 세상은 끊임없이 진화하고 있다.

Web 1.0 vs Web 2.0

웹3.0 세상 = 시맨틱 웹의 시대

트위터와 모바일을 통한 실시간 소통을 지켜보면서 내 마음은 이미 웹3.0 세상을 그리고 있다.

Web 1.0 : 서비스 제공자 위주의 단방향 웹
Web 2.0 : 양방향 소통. 정보 공유, 협업 등을 키워드로 하는 서비스 사용자 참여의 웹
Web 3.0 : 실시간 소통. 직업과 취미 등 개인 특성에 최적화된 서비스를 제공하는 웹

시간과 공간의 제약을 뛰어넘은 실시간 소통이 일반화 되고, 지능화된 웹이 사용자의 개인 취향에 맞춰 정보검색 결과를 제공하는 것이 웹3.0이다. 사용자들이 직접 콘텐츠를 만들고, 찾아서 즐기며 웹을 움직였다면 이제는 웹이 사용자의 요구를 분석하여 맞춤 서비스를 하는 것이다. 

다시말해 웹3.0은 시맨틱 웹(Semantic Web)의 시대! 컴퓨터가 정보자원의 단어, 문장의 뜻을 이해하고 논리적 추론까지 하는 차세대 지능형 기술이 시맨틱 웹이다.
* 시맨틱 연구개발 업체 ‘시맨틱스’ Click!

시맨틱 웹을 통해 네티즌의 정보 접근성은 더욱 가속화될 것이고, 개인의 취향에 따른 맞춤 정보 서비스의 중요성이 부각되면서 콘텐츠의 내용은 더욱 세분화, 전문화될 것이다. 따라서 웹3.0 시대에 소비자와 함께 호흡할 수 있는 기업이 되려면 검색 최적화된 정보 구축은 필수! 
이제 더이상 미룰 수 없다. 한발 늦은 지금, 더 늦기 전에 험난한 시간과의 싸움을 시작할 때다.

Web 3.0 관련 슬라이드 자료

Web 3.0: What’s Next

View more documents from Nicole Engard.

The Evolution of Web 3.0

View more documents from Marta Strickland.

Why Web 3.0?

View more documents from Sabin Buraga.

web 3.0 this time its personal

View more documents from jenny williams.

Web3.0

View more presentations from Johannes Bhakdi.

Web 3.0 explained with a stamp (pt I: the basics)

View more presentations from Freek Bijl.

 

글 | YunZOO