CSS 개발시 중요하다고 생각하는 도구 4가지

, ,

이 글은 영상으로도 보실 수 있습니다. 맨 아래로 내려가시면 볼 수 있습니다.


명필은 붓을 가리지 않는다는 말이 있지만 우리에게 해당하는 말은 아닙니다. 우리는 부족한 사람들이고 좋은 도구의 도움을 받아야 합니다.

어느 직종이든 자신이 다루는 도구에 대해서는 공부를 해야 합니다. 개발자도 마찬가지입니다. 도구를 다루는 방법을 웬만큼은 잘 아는 것이 좋다고 생각합니다.

좋은 도구에 대해 잘 알고 사용하면 생산성이 올라갑니다. 생산성이 올라가면 일 자체에 쫓기지 않게 된다는 점이 중요합니다. 생각과 연습을 더 많이 할 수 있죠. 그러면 작업물의 품질이 올라가고, 그러면 신뢰받게 되고, 페이가 오르고, 그러면 여유가 생기고, 그럼 생각과 연습을 더 많이 할 수 있게 되고… 이렇게 선순환이 이루어집니다.

도구 학습은 시간이 그리 오래 걸리지도 않아서, 투자 대비 효용이 높습니다.

전문가는 작은 차이가 있는 작업에도 다른 도구를 사용하곤 합니다. 도구가 작업에 끼치는 효율을 잘 알고 활용하는 것이죠. ⓒ사진 Katie Rodriguez

1. 통합 개발 환경(IDE)

첫 번째는 통합 개발 환경(IDE)입니다. 보통 에디터라고 부르는데요. 기능이 많은 에디터를 통합 개발 환경이라고 부릅니다.

프론트엔드 개발에서 가장 강력한 에디터는 제트브레인사의 웹스톰이라고 생각합니다. 좋은 도구는 생산성을 굉장히 높여 주기 때문에 프론트엔드 개발자는 웹스톰을 사용할수만 있다면 반드시 사용하는 것이 좋다고 봅니다.

다만 웹스톰은 월 15.9달러 구독제를 사용하는 유료 툴입니다.

학생이거나 선생님이라서 학교 이메일을 가지고 있다면 등록 후 무료로 사용할 수 있습니다.

만약 웹스톰을 사용할 수 없다면 비주얼 스튜디오 코드를 사용하는 것이 다음 대안입니다. 비주얼 스튜디오 코드는 무료입니다.

비주얼 스튜디오 코드는 통합 개발 환경이 아니지만, 여러 기능을 갖추고 있습니다.

비주얼 스튜디오 코드의 기본 기능으로 부족한 부분은 확장 프로그램으로 많이 보완할 수 있습니다.

확장 프로그램을 설치할 때는 깐깐하게 골라서 설치하는 것이 좋습니다. 기능을 충분히 살펴 보고 설치하시고, 한동안 사용해 보고 지속 사용 여부를 결정하시기 바랍니다.

또한 주기적으로 확장 프로그램 목록을 점검해서 사용하지 않는 것들은 삭제하는 게 좋습니다.

툴 학습의 출발점은 어렵지 않습니다. 저는 어떤 도구를 처음 접하고 학습을 할 때 메뉴를 쭉 훑어 보고, 단축키를 검색해 봅니다.

2. CSS 프리 프로세서(전처리기)

두 번째로 말할 툴은 CSS 프리 프로세서입니다. 국어로는 전처리기(前處理器)라고 하죠. CSS 문법에는 없는 강력한 기능들을 쓸 수 있게 해 주고, 그걸 실제 사이트에 사용할 때는 컴파일해서 CSS로 만든 것으로 쓸 수 있게 해 주는 도구입니다.

저는 사스(Sass)를 사용하지만 레스(Less)나 스타일러스(Stylus)를 사용해도 무방합니다. 최근에는 포스트CSS(PostCSS)도 인기입니다.

제가 처음에 사스를 접했을 때 저는, CSS는 이미 단순하고 유연한데 굳이 이걸 컴파일까지 해가며 추가 기능을 사용해야 하는가 하고 생각했습니다.

그러나 써 보니 실제 두 가지가 매우 유용했습니다.

첫째, 선택자 중첩, 미디어쿼리 중첩을 아직 CSS에서 바로 사용할 수는 없는데 사스는 이걸 할 수 있게 해 줍니다.

최근에 크롬에 중첩 문법이 도입되기는 했습니다. 다른 브라우저들도 곧 도입할 거라 봅니다. 그러나 많은 사람들을 대상으로 하는 웹사이트에서는 인터넷 익스플로러가 완전히 사라질 때까지는 아직 도입하기가 힘들다고 봅니다.

인터넷 익스플로러로 쓰면 다소 불편하거나 못생긴 정도라면 도입할 수도 있을 것입니다. 그러나 아예 쓰지 못하게 만드는 수준이라 굳이 중첩 문법을 CSS 문법으로서 도입하는 것은 부정적입니다. 전처리기를 사용하면 얼마든지 도입할 수 있는 문법이니 말입니다. 스탯 카운터에 따르면 2023년 3월 인터넷 익스플로러의 한국 점유율은 0.22퍼센트입니다.

둘째, 개발 시점에는 파일을 모듈화해 나눠 두고, 출시 시점에는 하나의 파일로 합칠 수 있다는 점이 매우 유용했습니다. 파일을 모듈로 나눠서 연관성 있는 코드들끼리만 묶어 두는 것은 개발할 때 스트레스를 매우 줄여 줬습니다.

변수와 함수 사용도 유용했지만 위 두 가지가 결정적이라고 봅니다.

저는 사스를 커맨드라인에서 사용합니다. 물론 커맨드라인에 익숙지 않은 분들은 비주얼 스튜디오 코드의 Live Sass Compiler 같은 확장 프로그램을 사용할 수도 있습니다. 그러나 저는 여러분이 커맨드라인에 친숙해지시면 좋겠습니다.

오늘날에는 프론트엔드 개발자들도 커맨드라인을 사용할 일이 많습니다. 또 커맨드라인을 사용하는 것이 도구를 이해하고 이용하는 데 더 유리합니다.

개발툴은 본체가 커맨드라인이고 GUI가 있더라도 커맨드라인 툴을 감싸는 형태로 돼 있는 경우가 많습니다. 즉, 본체의 기능이 더 풍부하고 논리적으로 명확할 수밖에 없습니다.

이 강의에서 다루지는 않지만 널리 사용되는 Git도 마찬가지로 커맨드라인을 익히는 것을 추천드립니다.

3. 실시간 동기화 툴: 브라우저싱크(BrowserSync)

세 번째 도구는 소스와 브라우저를 실시간으로 동기화해주는 도구입니다. 소스 변경사항을 브라우저에 실시간으로 반영해 주는 도구는 생산성을 매우 높여 줍니다. 수천 번의 수동 새로고침을 없애 주니까요.

제가 사용하는 툴은 브라우저싱크입니다. 기능이 심플한 편이라 쉽게 익히실 수 있을 겁니다.

4. 브라우저 개발자 도구

마지막 도구는 브라우저 개발자 도구입니다. 이미 활용을 하고 있으실 텐데요. 이 도구도 공부하면 쓸 수 있는 게 많습니다.

제가 작업 과정에서 브라우저 개발자 도구를 많이 활용할 것인데요. 보시면 될 것 같습니다.

크롬 개발자 도구 문서파이어폭스 개발자 도구 문서의 개요를 한 번 살펴 보시는 것도 도움이 될 수 있습니다. 개발자 도구 팁 같은 키워드로 검색해 보시는 것도 좋습니다.

정리

간단하게 개발 도구에 대해서 설명했는데요. 사실 웹팩을 다루지는 못해서 프론트엔드 개발이라는 측면에서 보면 반쪽짜리 소개입니다.

다만 CSS 기준으로 설명한 것이라 웹팩은 뺐습니다. 웹팩까지 다루면 내용이 너무 무거워지니까요. 그러나 프론트엔드 개발 전체 측면에서 더 공부할 분들은 웹팩에 대해서도 찾아 보시기를 권하겠습니다.

Git처럼 중요한 도구 역시 소개를 하지 않았는데요. 이건 요즘 기본중의 기본입니다. 따라서 Git도 별도로 공부하시기를 권합니다. Git도 기능이 많고 원리를 잘 이해하면 더 잘 사용할 수 있기 때문입니다. 소스 코드를 관리하는 데 있어서도 큰 편안함을 느낄 수 있습니다.

《프로 Git》처럼 좋은 책들이 온라인에 무료로 공개돼 있습니다. 종이책도 있습니다.

도구는 게임으로 치면 패시브 스킬 같은 것이라는 생각이 듭니다. 한 번 투자하면 두고두고 다양한 곳에서 효율을 올려 주는 것이죠. 꼭 위에서 언급한 4가지 도구가 아니더라도, 사용하는 도구에 대해 한 번 공부해 보면 어떨까요.


이 내용은 프로젝트 중심 실전 CSS의 세 번째 영상 내용입니다.

카테고리 글 목록 👉

, ,

대표글

“CSS 개발시 중요하다고 생각하는 도구 4가지” 에 하나의 답글

  1. […] 개발자에게 Node.js는 피할 수 없는 툴입니다. 제가 이야기한 중요한 네가지 툴 중에 Sass와 BrowserSync가 바로 Node.js 환경에서 돌아가는 자바스크립트 […]

댓글 남기기