자몽톡과 더덕마켓 클론 코딩으로 배우는 Sass

강윤호 지음

제이펍 2026년 03월 17일 출간 국내도서 : 2026년 02월 05일 출간

작품소개

책소개

모던 CSS 기능이 늘어나면서 스타일을 정리할 수 있는 선택지가 많아졌지만, 여전히 규모 있는 프로젝트에서는 구조를 세우고 반복을 줄이는 일이 쉽지 않다. 이 책은 CSS를 이미 써본 사람, 그래서 오히려 더 답답해진 사람을 위해 Sass를 제대로 쓰는 방법을 안내한다. Sass를 새롭게 외우는 대신, 모던 CSS와의 관계 속에서 CSS를 더 잘 쓰기 위한 확장 도구로 이해시키고, 왜 이런 기능이 필요한지부터 실제로 어디에 써야 효과가 나는지까지 기준을 제시한다.
주석과 중첩 규칙 같은 기초부터 변수, 믹스인, 함수, @extend까지 핵심 기능을 차근히 다루고, 조건문과 미디어 쿼리로 스타일을 더 유연하게 구성하는 방법도 정리한다. 후반부에는 ‘자몽톡’ 메신저 앱과 ‘더덕마켓’ 중고 장터 사이트 클론 코딩 실습을 통해 공통 스타일 분리, 페이지와 컴포넌트 단위 모듈화, 재사용 가능한 스타일 구조를 직접 만들어보며 체득하도록 구성했다.
AI가 코드를 만들어주는 시대일수록 스타일이 깨졌을 때 이를 판단하고 고칠 수 있는 사람이 강하다. CSS를 기본기로 삼고, 모던 CSS, Sass, SCSS를 상황에 맞게 선택하며, 더 깔끔하고 유지보수 가능한 스타일을 만들고 싶은 프런트엔드 개발자와 퍼블리셔에게 든든한 출발점이 되어줄 책이다.

목차

베타리더 후기 vii
시작하며 x
이 책에 대하여 xii

PART I Sass 시작하기
CHAPTER 1 Sass를 소개합니다 3
1.1 CSS 전처리기 3
1.2 Sass를 사용해야 하는 이유 5
__1.2.1 낮은 진입 장벽 5
__1.2.2 유용한 기능과 안정성 5
__1.2.3 Sass 라이브러리와 확장 5
1.3 Sass 작동 원리 6
__1.3.1 명령행 인터페이스 7
__1.3.2 프로젝트에 Sass 도입 시 주의할 점 8
1.4 Sass의 두 가지 문법 8
요약 9

CHAPTER 2 Sass 설치하기 10
2.1 웹브라우저와 코드 에디터 10
__2.1.1 웹브라우저 설치 10
__2.1.2 코드 에디터 설치 12
2.2 비주얼 스튜디오 코드 확장 기능 Live Sass Compiler 15
__2.2.1 Live Sass Compiler 설치하기 15
__2.2.2 Live Sass Compiler 사용하기 19
2.3 Sass 설치하기 25
__2.3.1 Sass 설치하기 25
__2.3.2 Sass 명령어 사용하기 34
__2.3.3 Sass 설치 및 테스트를 마치며 38
요약 38

CHAPTER 3 Sass 기초 40
3.1 주석과 중첩 40
__3.1.1 Sass 주석 40
__3.1.2 Sass 중첩 규칙 42
3.2 상위 선택자 참조와 단축 속성 중첩 46
__3.2.1 상위 선택자 참조 46
__3.2.2 상위 선택자와 결합하지 않고 치환만 하는 경우 48
__3.2.3 네임스페이스 중첩 50
3.3 변수 51
__3.3.1 CSS 변수와 Sass 변수 비교 52
__3.3.2 Sass 변수는 언제 어떻게 사용할까? 54
3.4 믹스인 55
__3.4.1 믹스인 사용법 55
__3.4.2 믹스인 호출 시 인수 전달하기 57
__3.4.3 믹스인 기본 인수 설정하기 60
__3.4.4 믹스인 콘텐츠 블록 62
3.5 Sass 함수 65
__3.5.1 함수 사용법 65
__3.5.2 매개변수 사용법에 따른 함수의 형태 68
__3.5.3 가변 인수 70
3.6 @extend 지시자 71
__3.6.1 @extend 사용법 71
__3.6.2 유령 스타일 블록 만들기 73
__3.6.3 믹스인과의 비교 75
3.7 @debug 지시자와 값 78
__3.7.1 @debug 지시자 78
__3.7.2 숫자와 문자열 80
__3.7.3 리스트와 맵 82
__3.7.4 불리언과 %00; 85
요약 87

CHAPTER 4 Sass 고급 88
4.1 제어문 88
__4.1.1 @if 조건문 89
__4.1.2 @while 반복문과 @for 반복문 93
__4.1.3 @each 반복문 96
4.2 모듈화 99
__4.2.1 @import 지시자 99
__4.2.2 @import 사용법 100
4.3 미디어 쿼리 102
__4.3.1 Sass 미디어 쿼리 102
__4.3.2 Sass 문법을 활용한 미디어 쿼리 103
4.4 빌트인 모듈 106
__4.4.1 sass:list 106
__4.4.2 sass:map 107
__4.4.3 sass:math 108
__4.4.4 sass:string 109
요약 109

PART II Sass를 이용한 클론 코딩 프로젝트
CHAPTER 5 자몽톡 클론 코딩 113
5.1 자몽톡 만들기 113
5.2 프로젝트 구조 만들기 117
__5.2.1 프로젝트 폴더 생성 117
__5.2.2 Sass 파일 구조 자세히 살펴보기 118
5.3 프로젝트 진행 121
__5.3.1 로그인 페이지 만들기 121
__5.3.2 내비게이션 바 만들기 129
__5.3.3 헤더 바 만들기 133
__5.3.4 채팅 미리 보기 만들기 137
__5.3.5 폰트어썸 사용하기 143
__5.3.6 폰트어썸 아이콘 추가하기 148
__5.3.7 채팅 추가하기 154
__5.3.8 채팅 입력 폼 추가하기 160

CHAPTER 6 더덕마켓 클론 코딩 164
6.1 아르바이트 구인 서비스 페이지 만들기 164
6.2 프로젝트 구조 만들기 167
__6.2.1 프로젝트 폴더 생성 167
__6.2.2 Sass 파일 생성 및 임포트 168
6.3 프로젝트 진행 169
__6.3.1 페이지 헤더 만들기 169
__6.3.2 정보 섹션 만들기 177
__6.3.3 구인공고 섹션 만들기 180
__6.3.4 배너 만들고 메인 콘텐츠 마무리하기 186
__6.3.5 페이지 푸터 만들기 190

APPENDIX A Sass 문법과 유사한 모던 CSS 기능 385
A.1 중첩 규칙 198
A.2 함수 200
A.3 조건문 204
마치며 205

찾아보기 207

책 속으로

Sass 스타일 문서는 CSS로 선언할 수 있는 모든 스타일을 포함할 수 있습니다. 심지어 Sass가 지원하는 추가 문법을 전혀 사용하지 않고, 오로지 기존 CSS 코드만으로 Sass 문서를 작성한다고 해도 전혀 문제가 되지 않습니다(물론 그렇게까지 할 이유는 없습니다). Sass만을 위해서 만들어진 새로운 스타일 속성이나 속성값은 없습니다. Sass는 단지 CSS의 선택자, 스타일 속성, 속성값을 다양하고 편리한 문법적 요소를 이용해 작성할 수 있도록 도와줄 뿐입니다. 따라서 CSS에 어느 정도 익숙한 개발자라면, 능숙하게 Sass를 사용할 수 있게 되기까지 그리 오랜 시간이 걸리지 않을 것입니다. (5쪽)

프로그래밍 언어를 하나라도 다루어본 경험이 있다면 Sass의 믹스인을 보고 ‘믹스인은 마치 함수 같네’라는 느낌을 받았을 것입니다. 재미있는 사실은, Sass가 믹스인과 구분되는 별개의 기능으로써 함수를 지원하고 있는 것입니다. @function 지시자를 이용해 정의할 수 있는 Sass의 함수는 믹스인과 어떻게 다른 걸까요? / 함수를 정의하기 위해서는 @function 지시자와 함수의 이름, 그리고 함수의 기능이 필요합니다. 언뜻 보기에 함수의 정의 형태는 믹스인의 정의 형태와 크게 다르지 않아 보입니다. 그러나 둘 사이에는 믹스인이 스타일 블록을 반환하는 것과 달리, 함수는 @return 지시자를 통해 속성값을 반환한다는 결정적인 차이가 존재합니다. (65쪽)

코드를 작성하다 보면 곧잘 ‘이 상황에서 이 변수는 어떤 값을 참조하지?’와 같은 궁금증이 생기곤 합니다. 이런 상황에서는 통합 개발 환경이 지원하는 브레이크 포인트를 이용해 변수의 값을 모니터링하는 것이 가장 좋은 방법일 것입니다. 그러나 이는 무척 번거로운 작업이기 때문에, 개발자들은 편의를 위해 변수의 값을 콘솔에 출력하는 방식으로 ‘디버깅’ 작업을 처리하곤 합니다. / Sass는 콘솔을 통한 디버깅 작업을 돕기 위해 @debug 지시자를 지원합니다. 이 지시자 뒤에 값 또는 표현식을 쓴 다음 코드를 실행하면, 콘솔을 통해 그 결과를 확인할 수 있습니다. (78~79쪽)

CSS는 다른 스타일 문서의 코드를 가져올 때 사용할 수 있는 @import 지시자를 제공합니다. 이를 적절히 활용하면 여러 개의 CSS 문서가 하나의 웹페이지를 위해 작동하도록 할 수 있습니다. / Sass는 CSS의 @import 지시자를 그대로 사용하되, 여기에 Sass와 관련된 기능을 추가하여 활용도를 높였습니다. @import 지시자를 이용하면 코드를 여러 개의 파일로 분리할 수 있고, 이때 코드 전체 성능에는 어떤 영향도 주지 않습니다. 분리된 여러 개의 파일은 컴파일 시 하나의 CSS 문서로 합쳐집니다. (99쪽)

Sass는 스타일 블록 내에 미디어 쿼리를 포함할 수 있는 중첩 규칙을 지원합니다. CSS 코드처럼 미디어 쿼리 블록을 별도로 만드는 것도 괜찮은 방법이지만, 미디어 쿼리를 스타일 블록에 중첩하면 해당 스타일 블록의 변화를 파악하기가 더 편리해집니다. 또한 특정 스타일 블록에 대해서만 미디어 쿼리를 적용할 수 있어 버튼이나 내비게이션 바와 같은 개별 컴포넌트를 스타일링할 때 코드를 관리하기가 쉬워집니다. (103쪽)

Sass는 스타일시트 작성에 도움이 될 만한 유용한 기능들을 미리 만들어두고 이를 모듈 단위로 제공합니다. 이러한 모듈들을 가리켜 빌트인 모듈built-in module이라고 합니다. Sass가 제공하는 모든 빌트인 모듈의 URL은 ‘sass:’로 시작하는데, 이러한 이름 규칙은 해당 모듈이 Sass의 일부임을 나타내기 위한 수단입니다. 사용자는 @use 지시자를 이용해 빌트인 모듈의 U RL을 호출함으로써 빌트인 모듈의 기능을 사용할 수 있습니다. (106쪽)

출판사 서평

따라 하며 배우는 실전 Sass, SCSS 스타일 원칙
이 책은 Sass 문법을 나열하는 사용 설명서가 아닙니다. 규모가 커질수록 복잡해지는 CSS를 어떻게 구조화하고, 반복을 줄이고, 유지보수 가능한 스타일로 바꿀 수 있는지를 다룹니다. 이미 CSS를 써봤고, 그래서 오히려 더 답답해진 분들을 위해 Sass를 CSS를 더 잘 쓰기 위한 확장 도구로 설명하는 실전 가이드입니다.

이 책만의 특별한 점
Sass를 왜 써야 하는지부터 출발합니다. CSS 전처리기라는 개념, Sass의 작동 원리, 두 가지 문법의 차이를 먼저 이해한 뒤에 문법으로 들어갑니다. 기능을 외우게 하기보다 언제 쓰고 언제 쓰지 말아야 하는지를 판단할 수 있도록 기준을 제시합니다.
1.문법보다 구조와 판단 기준에 집중
주석과 중첩 규칙 같은 기본부터 변수, 믹스인, 함수, @extend까지 핵심 기능을 다루되, CSS 변수와 Sass 변수를 비교하고 믹스인과 @extend를 구분하며 선택 기준을 분명히 합니다. Sass를 목적이 아니라 수단으로 다루는 관점을 계속 유지합니다.
2.실제 프로젝트 흐름을 그대로 옮긴 클론 코딩
'자몽톡' 메신저 앱과 '더덕마켓' 중고 장터 사이트를 클론 코딩하며 파일 구조 설계, 공통 스타일 분리, 페이지와 컴포넌트 단위 모듈화를 직접 경험합니다. 예제 수준이 아니라 실제 서비스 구조에 가까운 흐름으로 Sass가 어디서 힘을 발휘하는지 체감하게 합니다.
3.Sass 문법과 유사한 모던 CSS 기능 부록 제공
중첩 규칙, 함수, 조건문 등 Sass와 개념적으로 닮아 있는 모던 CSS 기능을 부록으로 정리했습니다. Sass를 배우며 자연스럽게 최신 CSS 흐름까지 함께 이해할 수 있도록 구성해, 기술 선택의 폭을 넓히고 상황에 맞는 판단이 가능하도록 돕습니다.

이 책은 누가 읽으면 좋을까요?
●CSS를 써봤지만 프로젝트가 커질수록 관리가 힘들어졌던 분
●Sass를 배워보고 싶었지만 언제 써야 할지 감이 안 잡혔던 분
●프런트엔드 개발이나 웹 퍼블리싱에서 스타일 구조를 한 단계 끌어올리고 싶은 분

이 책에서 다루는 내용은 무엇인가요?
●CSS 전처리기와 Sass의 개념과 작동 원리 이해
●주석과 중첩, 상위 선택자 참조와 네임스페이스 정리
●변수, 믹스인, 함수, @extend의 역할과 선택 기준
●조건문과 반복문을 활용한 유연한 스타일 구성
●미디어 쿼리와 모듈화를 통한 반응형 스타일 설계
●클론 코딩 프로젝트를 통한 실무 중심 Sass 활용 경험

인물정보

저자(글) 강윤호

현재 직업훈련교사로 활동하며, 온·오프라인 교육 현장에서 프로그래밍과 IT 기술을 가르치고 있다. 클래스101, 인프런 등 다양한 플랫폼과 교육 기관에서 강의 경험을 쌓아 왔으며, 복잡한 기술을 이해하기 쉽게 전달하는 데에 꾸준히 관심을 가지고 있다. 웹 앱을 비롯한 다양한 애플리케이션을 보다 사용하기 편하고 보기 좋게 만드는 일에 흥미를 느끼며, CSS를 비롯한 웹 기술은 물론 파이썬, 인공지능, 로봇 분야까지 폭넓게 학습하고 교육 콘텐츠로 풀어내는 것을 즐긴다. 유튜브 채널 ‘유노코딩’을 통해 IT 지식을 공유하며, 학습자에게 실질적인 도움이 되는 설명과 예제를 만들기 위해 노력하고 있다.