신규 테마 반응형 작업 중입니다.
기존에 사용하던 코드들을 모두 새로운 방식으로 재구현해야 하기도 했고 생각보다 시간이 오래 걸리고 있습니다.
지금까지 제작했던 자료들 소스를 다시 보니까 그 당시에는 나름 열심히 만들었던 것 같습니다. 이렇게나 분량이 많았을 줄은 몰랐네요ㅋㅋ
웹에는 사실 적합한 형태는 아니지만 요즘 트랜드인 하단 메뉴 제작했습니다.
pc에서는 팝업으로 뜨던 알림, 쪽지, 프로필 정보 등이 하단메뉴로 들어가고 다이나믹하게 페이지처럼 보이도록 구현했습니다.
일부 사이트에서는 알림과 쪽지를 사용하지 않기 때문에 이런 경우는 어떻게 풀어나가야 할지 고민이네요.
Rhymix + jQuery + Vue = ?
이전에 언급했던 것처럼 이번 프로젝트에는 node.js 기반의 개발기술이 적용됩니다.
postcss와 tailwind를 사용하고, vue.js를 사용하며, webpack으로 번들링합니다.
css 관련 스택보다도 vue.js의 사용이 이번 프로젝트의 주요 특징입니다. xe의 문법과 함께 혼용해야 하기 때문에 컴파일러를 사용하지 않고 런타임 빌드를 사용했습니다. 또한 일부 컴포넌트는 그대로 런타임 빌드를 사용하지만 SFC(Single File Component: Vue의 템플릿 문법)를 사용하여 구현하였습니다. Vue의 주요 특징은 반응형입니다. 상태의 변화에 따라 화면을 변화시킵니다. 직접 돔을 조작하는 코드를 입력해야 하는 jQuery에 비해 코드의 복잡도를 해소하고 구조적으로 우아해집니다. 다만 역시나 SPA로 작업하는 게 아니기 때문에 아쉬운 점이 많습니다. 선언형 구조를 지향하는 현대적인 개발 환경에 비해 xe의 템플릿 문법 안에서 동작해야 하기 때문에 관리해야할 상태의 양이 너무 많아지는 단점이 있습니다.
vuex를 사용하는 방법도 있지만 SPA도 아닌 프로젝트에 vuex를 적용한다면 되려 간단한 작업을 위해 너무 많은 코드가 생길 우려가 있습니다. 나름대로 xe의 템플릿 문법과 Vue가 화합할 수 있는 구조를 구성하고 상태 기반 관리보다 이벤트 기반이 더 효율적이라고 판단되면 jQuery를 사용하고 있습니다.
현업에서는 이미 모든 코드에서 jQuery가 흔적도 없이 지워져서 이런 레거시 기반의 개발이 썩 마음에 들진 않지만 라이믹스라는 세계관에서는 조금 더 진보한 개발방식을 적용한 것 같아 이정도로 만족하고 있습니다.
PostCss 적용... 하지 말까?
Vue는 어떻게든 본인의 자리를 찾은 것 같은데 postCss의 활용도가 아쉽습니다. 물론 제 역량 부족인 탓도 있지만 css의 한계를 벗어났다고 평가받는 postCss를 css로 번들링해서 쓰고 있기 때문에 사실상 sass 확장판 정도의 느낌입니다. 본래 postCss는 css파일을 반환하지 않고 js 파일로 번들링됩니다. 하지만 js보다 돔이 먼저 작성되고 이후에 css가 적용되버리는 탓에 잠시동안 css가 적용되지 않은 웹페이지가 보여지는 현상이 발생하여 결국 css로 뽑았습니다.
다크테마 및 색상 커스터마이징 기능을 위해 CSS Variable을 사용했는데 아시겠지만 이 아이는 sass의 lighten, darken, mix 등등 각종 기능을 사용하지 못합니다. 물론 postCss는 sass 이상의 것을 할 수 있기 때문에 sass 변수나 위의 유틸기를 적용할 수도 있지만! 중요한 건 라이믹스는 sass/less를 공식 지원하고 있기 때문에 서버 단에서 sass 변수를 조작할 수 있습니다(!).
물론 프론트 단에서 레이아웃 설정에 따라 css를 변화시키는 시스템을 구현하면 되겠지만 그건 배보다 배꼽이 커지는 꼴이거든요. postCss의 확장성을 좀 얻어보겠다고 공식 지원되는 포맷을 포기하는 것도 좀 아쉽고 가장 큰 아쉬움은 역시나 빌드 시간이 더럽게 길다는 겁니다(...) SFC로 작성된 일부 Vue 컴포넌트들과 postcss 파일들을 빌드하면 12초 정도 걸립니다. 코드를 수정할 때마다 12초를 기다려야 한다는거죠.
기다려주시는 분들이 계셔서 얼리액세스를 붙여서 빨리 공개하고 싶지만 이런 아쉬운 점이 보일 때마다 코드를 다 갈아엎어 버리고 싶기도 합니다. Toss의 개발 철학 중에는 이런 말이 있죠. "Done is better than Perfect." 그래도 새로운 제품을 출시할 때마다 발전하는 구조를 지향하기로 했기 때문에 이번 프로젝트는 완벽보다 완성에 집중하도록 하려고 합니다.
아니면 원래 어두운건가요??