검색 폼

BLOG Here are some topics that have been on our mind lately.

[] Sass 배낭 꾸리기
03 June 2014 by http://bit.ly/1klIjan

SASS 배낭꾸리기

“열심히 CSS를 배워 이제 좀 익숙해지고 편해지려 하는데 또 다른 언어라니! 도대체 SASS가 뭔데?”라고 SASS를 의심하는 분이 계실 겁니다. 현재 작업과정을 떠올려 보세요. CSS 코드에서 속성값 하나 바꾸는 데 많은 시간을 보내지 않나요? 이렇게 답답함을 느끼면서도 계속 Ctrl+C 키와 Ctrl+V 키를 누르고 있지 않나요? 이제 현명하게 코드를 관리해야 할 때입니다.

이 글의 저자이자 웹 개발자인 마셜 노만도 여러분과 같은 경험을 했습니다. 처음 SASS를 알게 되었을 때 그는 거부 반응을 보였죠. “왜 이것을 써야 하지? CSS로 충분한데?”라고 생각했죠. 그런데 지금 그는 SASS를 사용하고 있습니다. 이 글에서 마셜은 SASS를 사용하게 된 동기와 그것을 구조화하는 방식을 배낭여행을 가기 위해 짐을 싸는 방법에 비유해 재미있고 쉽게 설명해 줍니다. 여러분도 SASS와 함께 떠날 준비를 해볼까요?

[편집자주]


경험이 풍부한 배낭여행 전문가는 배낭을 꾸리는 방법이 평소에 신는 신발만큼이나 중요하다고 말합니다(아예 신지 않으면 모르지만, 만일 그런 사람들 중 하나라면요). 저는 예전에 스타일 코드를 작성하며 Sass의 구조를 잡는 것이 마치 배낭을 꾸리는 것과 비슷하다는 것을 알았습니다.

장거리 도보 여행을 가려고 짐을 쌀 때 모든 것을 가방에 차곡차곡 챙깁니다. 무게가 많이 나가고 자주 꺼내지 않는 물건을 먼저 넣습니다. 침낭, 취침용 패드, 해먹(hammock) 같은 것이죠. 위로 올라오면서 꺼내기 쉽고 가방 안에서 옮기기 편한 물건을 넣습니다. 옷가지, 취사 도구, 과자, 응급처치 도구, 콤파스, 지도 같은 것 말이죠.

인터넷에서 이야기해 보죠

바닐라(Vanilla) CSS [1]에 의존했던 때가 있었어요. 작은 코드 하나라도 직접 작성해야 했습니다. 첫 작업은 늘 자랑하고 싶고 끝내주게 멋진 작품이 될 수 있었습니다. 하지만 불가피하게 개선사항이 나오자 여기 저기에서 코드를 수정하고 클래스나 섹션을 추가해야 했습니다. 그러면서 코드는 엉기기 시작했죠.

위에서 아래로 써 내려가는 융통성 없는 CSS의 특성 때문에 코드를 잘 정리된 상태로 유지하기가 힘들었습니다. 그때부터 저는 이상한 작업을 하기 시작했죠. 자주 반복하는 CSS 규칙 섹션을 임시 문서에 담고 문서를 열어 놓은 채 필요할 때마다 복사하기와 붙여넣기를 해서 코드를 원본 파일에 넣었습니다. 앞서 말했던 것처럼 악몽 같은 유지보수 작업이었습니다.

Sass와 함께

거의 1년 6개월 전만 해도 저는 “전처리기(preprocessors)”에 대해 몰랐습니다. 그 후에 Sass에 대해 듣게 되었는데 그때만 해도 “왜 이것을 써야 하지? CSS로 충분한데?”라고 생각했습니다. 그런데 결국 Sass를 사용했습니다. 대세가 바뀌었죠.

Sass는 Syntactically Awesome Style Sheets의 약자로, 우리에게 많은 툴을 줍니다. 클래스 이름을 장황하게 쓰지 않고 스타일을 중첩(nest)할 수 있습니다. 믹스인과 extends 같은 기능을 사용해 코드를 체계적이고 신속하게 만듭니다.

Sass는 모듈식으로 되어 있는데 이것이 짐을 쌀 때 배낭의 웨빙(webbing)[2]과 어떻게 유사한지 자세히 설명할 수 있습니다. 하지만 여기서는 여러분이 이 툴에 대한 기본 지식을 가지고 있다고 가정합니다.

수준 높은 구조화

스파크박스(Sparkbox)의 개발자들은 SMACSS식의 사고를 가지고 웹사이트 각 부분에 해당하는 개별 .scss 파일을 만듭니다.

예: _fonts.scss, _colors.scss, _header.scss, _footer.scss, _blog-listing.scss, _hero.scss

스타일을 이처럼 관리하기 쉬운 작은 덩어리로 나눌 수 있습니다. 보통 나눠진 파일에 150줄 정도의 코드가 있습니다. 파일에서 특히 글꼴과 색상 같이 스타일 전체에 영향을 주는 코드는 배낭에 넣는 텐트와 침낭에 비유할 수 있습니다.

전체에 영향을 주는 코드를 먼저 설정하세요. 작성하는 모든 코드의 기준이 되고 그것으로부터 코드가 계속 확장될 것입니다. 일단 배낭 안에 넣어두면 여러 번 꺼낼 필요가 없거든요.

만일 스타일시트에 작성된 코드가 200줄이 넘게 되면 그 파일을 나누어야 할지, 일부 코드를 리팩토링(refactoring)[3] 할지 고려해야 합니다.

양이 적은 코드

Sass를 작성할 때 각 엘리먼트에 규칙을 더해가듯 구조를 만듭니다. 양이 적은 코드는 이동이나 접근이 쉽고 나중에 수정하기도 편합니다. 마치 배낭 위에 물건을 올려놓는 것처럼요. 예를 들면 작은 믹스인 코드가 있습니다. 클래스 이름이 .warm이고 모든 엘리먼트의 배경색을 덮어씁니다. 플리스(fleece)[4] 담요처럼 말이죠.

스타일이 적용될 엘리먼트

See the Pen uipLn by jin ah chon (@chon3) on CodePen.

믹스인을 먼저 넣습니다.

See the Pen gzKCd by jin ah chon (@chon3) on CodePen.

만일 작업하는 데 필요한 믹스인이 없다면 글꼴, 레이아웃, 글꼴 색상에 관한 스타일을 각각 작성합니다.

See the Pen fctAg by jin ah chon (@chon3) on CodePen.

만약 미디어 쿼리를 고려해야 할 상황이라면 다음에 추가합니다. 스파크박스의 글인 ‘Sass mixin으로 미디어 쿼리 활용하기’를 읽어보시기 바랍니다. 이것은 믹스인의 위치를 정하는 규칙에서 벗어난 예외사항이긴 합니다.

See the Pen yDIFn by jin ah chon (@chon3) on CodePen.

자, 중첩 스타일을 작성할 준비가 되었습니다. 구조 안에 동일한 규칙을 보여주는 코드를 다음에 넣으세요. CSS를 중첩할 때 2~3단계 이상 깊게 들어가지 않도록 합니다. 더 많은 단계로 들어가며 코드를 작성하게 되면 그때 차라리 스타일을 나누세요. 그게 안전합니다.

See the Pen vBKxq by jin ah chon (@chon3) on CodePen.

여행을 떠나세요

이와 같은 방법으로 코드를 빨리 훑어보고 편하게 이동하며 유지보수가 쉬운 Sass 파일을 만들 수 있습니다. 물론 모든 사람이 사용해야 하는 규칙은 아닙니다. 단지 제 작업 방식일 뿐이죠. 그래도 형식을 구조화하는 것이 그렇지 않은 것보다 낫다고 믿습니다.


주석

  1. 바닐라 CSS: html 엘리먼트만 넣어 놓은 스타일시트.
  2. 믹스인: CSS 스타일 블록을 정의하고 재사용할 수 있도록 하는 Sass의 기능.
  3. 웨빙: 다양한 물건을 담아두거나 붙들어 둘 수 있고 쉽게 떼어낼 수 있도록 가방에 부착된 끈.
  4. 리펙토링: 중복된 코드를 제거해 보다 보기 쉬운 코드로 변경하는 것.
  5. 플리스: 다른 옷 위에 덮어 쓸 수 있는 매우 따뜻한 직물.

마셜 노만마셜 노만 Marshall Norman

트위터 @marshall_norman
드리블 https://dribbble.com/marshall-norman

마셜 노만은 오하이오주 데이톤에 위치한 스파크박스의 웹 개발자이다. 본인이 운영하는 싱글 세일(Single Sail)에서 웹사이트를 구축하고 디자인 프로젝트를 진행하고 있다.

이 글은 Sparkbox의 블로그 글을 번역한 것으로, 웹액츄얼리 북스팀이 Sparkbox로부터 허가를 받고 올린 자료입니다. 원본은 http://seesparkbox.com/foundry/sass_packing에서 확인할 수 있습니다.
※ 내용중에 오번역, 오탈자를 발견하신 경우에는 알려주세요.

※ 웹액츄얼리 북스팀에서 웹 디자인 관련 영문 번역이나 윤문을 해주실 분을 찾고 있습니다. 관심 있으신 분은 메일 보내주세요. books@webactually.com

[편집자주]

webactuallyhttp://www.webactually.com

웹액츄얼리팀은 '워드프레스'를 이용해 개인/기업을 위한 '브랜드페이지'를 제작하고 웹디자인 관련 책을 번역 출판합니다. 그것도 즐겁게.

Comments

Twitter