작업자가 초보자이든 전문가이든 상관없이 부트스트랩은 최근 사이트나 앱의 구조scaffold를 빠르고 쉽게 생성할 수 있는 소스 코드를 제공합니다. 점점 더 많은 개발자들이 개인 툴박스에 이 프레임워크를 넣고 있습니다.
부트스트랩에는 어두운 이면도 있습니다. 정리되지 않고 시맨틱하지 않으며 재사용 할 수 없는 마크업을 쉽사리 작성할 수 있습니다. 이렇게 작성해도 모든 브라우저에서 제대로 보여지긴 하지요.
저는 이 글에서 부트스트랩을 사용해 견고하고 시맨틱한 코드를 작성하는 방법에 대해 설명할 것입니다. 부트스트랩의 최신 버전에는 Sass를 공식적으로 탑재하고 있습니다. 이 글의 목적을 달성하고자 Sass의 가장 강력한 기능 중에 하나인 @extend 지시자를 사용할 것입니다.
시맨틱에 관하여
우선 무언가를 ‘시맨틱’하게 만든다는 말이 무슨 뜻인지 알아봅시다. HTML 문서는 정보의 계층구조적 관점에서 콘텐츠를 묘사합니다. 누구나 코드를 읽고 무엇을 말하고 있는지 알 수 있어야 합니다. 어떻게 보이는가는 해당하지 않습니다.
특히 CSS 프레임워크의 인기가 높아지면서 독자/개발자의 입장보다 CSS 문서 자체에 신경을 쓰며 HTML을 작성합니다. 요즘 웹사이트 소스 코드에서 이와 같이 작성된 HTML 마크업을 보는 것은 흔한 일이죠.
부트스트랩의 CSS 파일은 위의 코드가 무엇을 할지 압니다. 열이 모두 2개 있고, 한 열에 행이 3개 있으며, 나머지 열에 100% 너비가 적용된 행 1개가 있다는 것을 말이지요. 부트스트랩을 다뤄본 개발자라면 이것을 쉽게 파악합니다. 하지만 이 프레임워크를 사용해 본 경험이 없는 사람이 보았다면 어떨까요? 위의 HTML 코드들은 왜 있는 걸까요? 어떤 정보가 담겨 있죠? 이 마크업은 쓸만한 정보를 보여주지 않습니다.
시맨틱 마크업은 보이는 외관보다 콘텐츠를 설명하는 코드입니다. 위의 코드를 다음과 같이 의미가 담긴 코드로 작성할 수 있습니다.
전체 코드가 바뀐 것은 아니지만 위의 코드는 각 엘리먼트가 왜 있는지 다른 엘리먼트와 어떤 관계가 있는지 즉시 알려줍니다. 여기서 잃은 것이 있다면 시각적으로 어떻게 보일지 알 수 없다는 것이지요. 어쨌든 그것은 HTML의 목적은 아닙니다.
부트스트랩이 시맨틱한 스타일을 어떻게 반영할까?
여러분은 내장된 클래스없이 어떻게 부트스트랩을 사용할지 궁금해할 것입니다. Sass @extend 기능의 힘을 사용해서 이것을 해결할 수 있습니다.
Sass 문서:
@extend는 확장된extended 선택자가 있는 스타일시트 안에 어디에서나 확장하는extending 선택자를 넣어서 작동합니다.
이는 시맨틱한 선택자를 사용하면서 부트스트랩의 선택자를 확장할 수 있는 장점을 취한다는 의미입니다. 어떻게 적용하는지 봅시다.
@extend의 마술로 부트스트랩의 선택자와 우리가 만든 선택자가 컴파일 된 스타일시트에 서로 껴 맞춰 집니다. 컴파일 된 코드를 검사해보면 알 수 있듯이 확장된 클래스와 정확하게 동일한 속성이 선택자에도 있습니다. 예를 들면, 컴파일 된 CSS 코드 중에 이것이 보입니다.
여기서 컴파일 된 CSS 코드와 Sass를 나란히 함께 볼 수 있습니다. 깔끔하지 않나요?
재사용성Reusability
이 방법의 또 다른 장점은 가독성과 재사용성 모두를 가진 구성요소components를 만든다는 것입니다. 예를 들어 행과 열 밖에서 필요할 때마다 author 구성요소를 반복해서 만들지 않아도 됩니다. 대신 구축하기 쉽도록 구성요소 각 부분의 이름을 알기 쉽게 지어주세요. 전체 사이트에서 일관적으로 보이는지 부트스트랩을 통해 확인할 수 있습니다.
이식성Portability
부트스트랩이 최고의 프레임워크들 중에 하나일지라도 나중에 다른 프레임워크로 이전하거나 아예 자체 프레임워크를 제작할 때가 올지 모릅니다. 위에 대략 서술한 방식으로 이와 같은 작업을 할 수 있습니다. 왜냐하면 CSS에서 여러분의 마크업을 군더더기 없이 깔끔하게 분리할 수 있기 때문입니다.
툴벨트toolbelt를 매세요.
부트스트랩의 Sass 버전을 아직 사용해보지 않았다면 반드시 사용해 보세요. Github 페이지에서 시작하는 것이 좋습니다.
Sass가 유일하게 놀 거리는 아닙니다. HTML과 CSS에서 다음 단계의 시맨틱을 진정으로 알고 싶다면 BEM이나 SMACSS 같은 명명법naming convention을 권해드립니다. 여러분은 이것으로 선택자를 표준화하고 기억하기 쉽게 만들 수 있습니다.
이제 나가서 확장하세요.
부트스트랩에 놀랍도록 강력한 스타일 세트가 있습니다. 그렇다 하더라도 코드를 대충 꿰 맞추어서 마크업의 품질을 상실할 수도 있습니다. Sass의 @extend 지시자를 사용하면 콘텐츠와 개발자 모두를 위해 의미를 명확히 전달할 수 있는 마크업을 작성할 수 있습니다.
※ 내용중에 오번역, 오탈자를 발견하신 경우에는 알려주세요.
※ 웹액츄얼리 북스팀에서 웹 디자인 관련 영문 번역이나 윤문을 해주실 분을 찾고 있습니다. 관심 있으신 분은 메일 보내주세요.
books@webactually.com
[편집자주]
