디자이너가 SASS 준비하기
디자이너가 어디까지 해야 하나?
디자이너는 디자인하는 게 제일 중요하다. 디자인을 잘 하는 게 디자이너를 말해주는 모든 것이다.
디자이너가 말을 잘하거나,
디자이너가 글을 잘 쓰거나,
디자이너가 기획을 잘 해도,
디자이너는 디자인을 잘 해야 한다.
그런데 가끔 디자인을 잘 하려면, 자신이 디자인하는 바탕에 뭐가 있는지 알아야 한다.
바느질해본 적이 없는 패션 디자이너,
못질을 해보지 않은 가구 디자이너가 있을까?
디지털 디자이너라면, 최소한 무엇이 내가 디자인의 바탕이 되는지 알아야 한다고 생각한다.
개발자가 SASS를 하자고 했다. 다음에 해야지 하고 계속 미뤘었는데, 결국 SCSS파일을 수정해야 될 일이 생겨서 설치해야 했다. 언제나처럼 개발자는 무척이나 바쁘기 때문에 간단한 설치는 직접 해보기로 했다. SASS는 CSS 작업에 필요한데, 이 과정을 웹에서 찾아보면서 과정을 정리해보는 것도 좋겠다는 생각이 들었다. 일단 난 개발을 전혀 안 해본 맥북 프로를 가지고 시작했다.
요즘은 뭔가 배우기 쉬운 세상이다. 아마도 이 과정에서 뭔가 도움이 될 사람이 있을 거라는 생각이 들고, 내가 까먹을 것을 생각해서 과정을 정리해 둔다.
먼저 기본적인 터미널 명령어를 알아야 한다.
ls - 특정 디렉터리의 내용을 나열
cd - 다른 디렉터리로 변경
sudo - 추가적인 보안 권한을 얻기 위해 슈퍼유저로 인증
맥북에는 기본적으로 Ruby라는 게 깔려 있다. 그래서 gem 명령어를 통해 SASS를 설치할 수 있다는 글을 발견했다. 간단하군. 하면서 알려준 명령어를 쳐봤다.
$gem install sass
ERROR: Could not find a valid gem 'sass' (>= 0) in any repository
뭐지? 하고 에러 메시지를 구글 검색했더니, Ruby의 gem을(개발자들은 대체 왜 이름을 이렇게 짓는 걸까...) 설치하려면, 소스를 추가해야 한다고 한다. 개발자에겐 이게 없는 경우는 없는 모양이다. 아마 개발자에게 부탁했어도 여기서 삽질을 했을 것 같다. 이 부분은 코드를 알려주는 외국 커뮤니티 사이트에 누군가 질문을 해놔서 알 수 있었다. 뭔가 모르면, 그걸 나만 모르는 경우는 없다.
$ gem sources
*** CURRENT SOURCES ***
이렇게만 나온다. 소스 추가!
$ gem sources --add https://rubygems.org/
$ gem sources
*** CURRENT SOURCES ***
https://rubygems.org/
이제 저기서 gem을 가져오는 모양이다.
$ gem install sass
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.
권한이 없다고 한다. 찾아보니 sudo를 쓰면 된다고. sudo는 아까 위에 써놨다.
$ sudo gem install sass
슈퍼 유저로 하는 거라 그런지 비번 입력 후, 뭔가 막 깔기 시작했다. 나는 개발 관련 일을 하지 않았기 때문에 기존의 개발자가 쓴 글의 결과보다 약간 더 많은 gem이 깔렸다.
5 gems installed
이제 SASS를 할 수 있다. 적당히 stylesheets와 compiled 폴더를 만들고, 모든 sass 파일을 css파일로 변환한 후에 옮긴다는 명령어를 쳤다.
$ sass --watch stylesheets:compiled
이거 뭔가 파일을 수정하면 자동으로 되는 건 줄 알았더니만, 자동은 아니고, 명령어를 치면, 바꿔주는 모양이다. 옵션이 있다.
nested : 뎁스 별로 구분해서 컴파일
compact : 요소에 스타일이 속성을 한 줄씩 정렬해서 컴파일
expanded : 요소에 모든 스타일을 한 줄에 컴파일
compressed : 모든 요소를 공백 없이 컴파일
$ sass --watch --style compressed stylesheets:compiled
이후, 서브라임이라는 텍스트 에디터를 통해서 SCSS파일을 수정하고, CSS파일을 만들 수 있게 되었다. 여기까지 한 3시간 걸렸다. 맨 처음에 소스를 추가하는 부분이 없어서 좀 헤맸다. 개발자가 해주면, 금방 했겠지만... 이것 때문에 시간을 허비해서 혹시나 도움이 될까 봐 남겨둔다. 뭔가 빼먹은 게 있을 수도 있다.
설치한 후에는 서브라임에서 아주 간편하게 작업할 수 있었다.
SASS 문법은 아래 링크들에서 배웠다.
https://opentutorials.org/course/470/2490
https://soooprmx.com/archives/7948
예전에는 뭔가 배우려면 서점에 가거나 도서관에 가서 책을 찾아봐야 했다. 그리고 그 책의 내용이 맞기를 버전이 맞기를 플랫폼이 맞기를 하면서 천천히 읽어보고 더듬더듬 따라 쳐야 했다.
지금은 뭔가 구글에 검색만 하면, 친절한 이들이 남긴 이정표와 꼬리표가 사방에 있다. 숙련되는 것과는 별개로 시작은 언제든지 누구나 할 수 있다.
간혹 AI나 강력한 성능의 툴이 나오면 걱정하는 사람이 있다. '디자이너'가 없어지겠어요. 그런 일은 없다. 좀 더 인간적이고, 좀 더 새로운 일을 하면 된다. 예전에는 연필을 깎아주는 직업이 있었다. 그리고 종이에 적힌 간단한 메시지를 전달하는 사환이 있었다. 말을 모는 마부가 있었고, 모든 문서는 복사하거나 프린트하지 않고, 손으로 썼다.
지금은 깎는 건 둘째 치고, 잉크가 필요 없는 디지털 펜이 나오고, 간단한 메시지는 몇 번 두드리기만 하면 전달할 수 있다. 운전을 자동으로 해주는 날도 그리 멀지 않았다.
두려워하기 전에, 시작만 해보자.
