삘 받아서 뭔가 만들고 있습니다. (feat. 근황)

Alice

한창 Slow 테마 작업하느라 구상만 하고 있던 신규 디자인 컨셉, 엘리스입니다.

과감한 타이포그래피와 강약조절로 구성한 새로운 게시판 스킨입니다.

Slow 테마를 작업하면서 새로고침 없는 게시판 스킨을 구현하게 되었는데 테마 패키지로만 만족하기에는 범용성이 아쉬웠습니다. 왠만한 곳에서 어울릴만큼 심플하면서 무겁지 않고 가볍고 스킨만으로 필요한 것들이 충족되길 바랬습니다. 이미 많은 곳에서 차용되고 있는 디자인이자, 제가 지금까지 작업한 게시판 스킨에서 항상 보이던 특유의 아티클 구성이 조금 더 트랜드한 모습으로 돌아왔습니다.

커뮤니티 게시판에서는 좀처럼 볼 수 없는 과감한 타이포가 시도되었습니다. 본문 제목의 폰트는 48px이나 되고, 목록은 테이블형 디자인을 과감하게 버리고 제목을 강조한 디자인을 구성했습니다.

"디자인은 더하는 것이 아닌 빼는 것이다." 라는 유명한 말이 있습니다.

제가 디자인 철학으로 삼고 굉장히 좋아하는 말이기도 합니다.

엘리스에는 불필요한 요소들을 최대한 걷어내고 필수불가결한 요소만을 남겼습니다. 라이믹스부터 기본 탑재되는 알림센터의 사용을 강제하고 쪽지를 통한 댓글 알림 기능을 과감히 빼버리는 등, 엘리스는 트렌디하고 현명한 사이트의 방향성을 제시합니다.

강제성

제가 작업하는 작업물들에서 점점 커스터마이징이 제거되고 디자인 성격이 강조되는 것에는 양산의 용이성도 부정할 수 없는 이점이지만 각각의 컨셉트가 가진 방향성을 강제하면서 특유의 사용성을 확보할 수 있는 것이 가장 큰 이점입니다. 이퀴어 테마 패키지에서도 소극적이지만 디자인에 방향성이 존재했고 여러 사이트에서 안정적으로 정착된 것을 확인할 수 있었습니다. 범용적인 목적성이 강했던 이퀴어, 에덴, 히오스 등의 제품들은 특유의 패밀리룩을 가지고는 있었지만 개성과 확고한 목적성이 부족했습니다. 특히 위에서 언급된 "디자인은 더하는 것이 아닌 빼는 것이다." 라는 철학이 담기기에는 확보되어야 하는 케이스가 너무 많았습니다.

때문에 Slow 테마 패키지를 기획하여 실험적이고 특정 방향성이 강제되는 테마를 개발했습니다. 범용성이 항상 고려되던 기존의 개발 방향과는 전혀 다른 노선을 택한 것이죠. 덕분에 기획, 디자인, 개발의 과정이 빠르게 간소화되었으며, 목적에 맞게 특화된 디자인을 쉽게 내놓을 수 있게 되었습니다.

Vue.js는 빼는걸로...

Slow 테마에서 webpack과 Vue.js 등을 대거 사용했지만 의외로 구성을 잡기가 어려웠고, 개발 효율이 크게 상승하지 않았습니다. 게다가 vue.js를 인라인으로 사용하다보면 여러 애드온의 js와 충돌하기도 하고, 컴파일없이 인라인에서 돌리는 것이기 때문에 컴퓨팅 사양에 따라 jQuery보다 컴포넌트 작성 속도가 아쉬운 경우가 많았습니다. tailwind의 경우도 보통은 webpack에서 purge-css와 같은 플러그인을 이용해 사용되지 않는 클래스를 모조리 삭제해서 컴파일해주는 방식으로 용량을 줄이는데 애초에 SPA가 아니다보니 그게 될리가 없고(애초에 순수한 php도 html도 아닌 xe 템플릿 문법인지라 이걸 webpack 돌린다는 상상은 하면 안된다.) 때문에 상당히 무거워졌습니다.

이 문제를 해결하기 위해 라이믹스의 자체 sass 컴파일러를 사용하기로 했습니다. php로 변수를 만들어서 관리하고 scss로 변수를 전달해주고 기존 css 변수의 호환성 문제도 해결하고 독립적인 번들링 과정없이 라이믹스의 컴파일러를 이용하기 때문에 개발 효율이 올랐습니다.

라이믹스의 sass/less 컴파일러의 단점은 import 기능을 쓸 수 없다는 건데요.(autoprefix도...) 그렇다고 요소별로 관리하고 있던 여러개의 scss 파일을 한 번에 로드하면 수많은 서버 요청으로 인해 페이지 로딩에 지연이 걸릴 겁니다.

하지만 애초에 라이믹스는 번들링 기능을 갖고 있습니다. (ㄴ상상도 못한 정체ㄱ) 사이트 설정에 들어가보면 css 파일 합치기 기능이 있습니다. js 파일도 합쳐줍니다. 초기에는 이 기능에 버그가 조금 있어서 사용하지 않고 있었는데 이번에 사용해보니 아무런 문제없이 정말 잘 됩니다. 사이트 설정에서 css 합치기 옵션을 켜놓고 마음껏 scss 파일을 쪼개서 관리하고 특정 페이지에서만 사용되는 css는 if나 cond와 같은 xe 템플릿 문법을 이용해 로드 여부를 조정하면 됩니다. 단순히 합치는 것 뿐만 아니라 이런식의 활용을 통해 Tree shaking도 구현할 수 있다는 겁니다.

물론 말은 이렇게 했지만 유저 입장에서 체감이 달라지는 것이지 서버에서 그 많은 파일을 컴파일할 때 어떤 문제가 발생할지는 저도 모릅니다. scss 파일을 어찌 저렇게 빨리 컴파일하는 것이며, 언제 컴파일하고 언제 캐싱하는지 전 전혀 모릅니다. (판사님 저는..) 하지만 이 방법을 적용하면서 실제로 체감의 결이 달랐으며, 개발 효율도 높아졌습니다.

마치며

오랜만에 근황을 전하는 것 같네요.

요즘 시국도 시국인지라 XE타운 유저분들의 활동도 줄어든 것 같습니다.

조금은 흥미로운 내용이었으면 좋겠습니다.

다음에 또 흥미로울 만한 이야기로 돌아오겠습니다.

감사합니다 😁