623E9497-55F9-4634-A4DF-2B4961E519AF_1_102_o.jpeg 9CC4E7ED-6669-4673-A52C-D1491EB4F738_1_102_o.jpeg

 

신규 테마 반응형 작업 중입니다.

기존에 사용하던 코드들을 모두 새로운 방식으로 재구현해야 하기도 했고 생각보다 시간이 오래 걸리고 있습니다.

지금까지 제작했던 자료들 소스를 다시 보니까 그 당시에는 나름 열심히 만들었던 것 같습니다. 이렇게나 분량이 많았을 줄은 몰랐네요ㅋㅋ

 

웹에는 사실 적합한 형태는 아니지만 요즘 트랜드인 하단 메뉴 제작했습니다.

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." 그래도 새로운 제품을 출시할 때마다 발전하는 구조를 지향하기로 했기 때문에 이번 프로젝트는 완벽보다 완성에 집중하도록 하려고 합니다.

TAG •

snax

profile
안녕하세요! Digital Product Designer, Calvin Snax입니다.
제 작업물을 확인해보시거나 작업을 의뢰하고 싶으신 분들은 제 사이트를 방문해주세요.
https://calvinsnax.com

XE & Rhymix 제작 자료
#HASHTAG 레이아웃: https://calvinsnax.com/hashtag
Alice 게시판 스킨: https://calvinsnax.com/alice
Slow 테마 패키지: https://calvinsnax.com/slow
coronach 레이아웃: https://calvinsnax.com/coronach
equeer 레이아웃: https://calvinsnax.com/equeer
eden 게시판 스킨: https://calvinsnax.com/eden
  • ?
    다크모드가 되는건가요?
    아니면 원래 어두운건가요??
  • ? profile
    다크모드 전환 기능을 제공합니다. 사용자가 원하는 테마를 선택할 수 있는 기능입니다.
  • profile ?
    오~ 대박이네요
  • ?
    합리적인 가격과 다크배경 다른 디자인들보다 더 기대됩니다 ㅎ
  • profile
    이런 디자인 너무나 마음에 듭니다 !!
  • ?
    와..너무 좋아요..
  • profile
    하단 메뉴 지원하는 모바일 레이아웃이 의외로 찾을 수가 없더라구요!

    엄지 손가락을 생각하면 당근 하단 메뉴가 기본이 되어야 한다고 생각해요~!!
  • profile
    와 시크하네요!!
  • profile
    빨리 써보고 싶네요
    베타테스터를 모집하신다면
    베타테스터로라도 참여하고 싶은 심정입니다 ㅎㅎ
  • profile profile
    분량이 분량이다보니 사용성 테스트하는 겸 먼저 제 사이트에 선 적용해서 테스트 진행해볼 생각입니다.
  • ?

    개인적으로 webpack은 좀...
    원본 소스 없는 이상 수정이 많이 불편해질텐데 하나의 완결된 프로젝트도 아니고 스킨으로 쓰기엔 좀 별로가 아닐까요...
    저는 webpack 의존적이 되는 최근 nodejs 개발방향이 좀... 뭔가 아닌거 같더라구요.
    angularjs -> angular로 가야하는 이유도 잘 모르겠고...
    어째서 구지 컴파일 비스무리한 과정을 겪게 하는건지... 간단하게 소스 수정하기가 갈수록 불편해지는건지 모르겠습니다.

  • ? profile
    webpack은 현대적인 개발 도구의 기본입니다. 현재 현신적인 성능으로 주목받고 있는 svelte는 vue나 react와 다르게 그 자체가 컴파일러이며, 가장 효율적이고 순수한 js 코드를 반환합니다.
    webpack에 의존적인 node.js의 개발 방향이라는 말씀은 잘못됬습니다. node.js 진영 외에도 수많은 곳에서 컴파일 형식을 사용하고 있습니다. 또한 js 진영에서 번들링 프로그램은 webpack만 있는게 아닙니다. 심지어 php 진영에서도 컴파일러가 있습니다. 현재 보편적인 스타일 시트 기술로 알려진 scss 또한 컴파일러를 거쳐야 합니다. js의 최상위 업데이트 버전인 es6, es7이나 TypeScript 또한 바벨을 통해 컴파일하지 않으면 일반적인 브라우저 환경에서는 사용하지 못합니다. 인터프리터 언어인 JS의 한계를 극복시켜 준 장본인이 webpack인데 그런 이야기를 하시는 건 잘못됬다고 생각합니다.

    그리고 오히려 컴파일러의 존재로 인해 소스 수정이 용이해집니다. 유저(사이트 이용자)에게 도달하는 코드는 최대한 간결하고 효율적인 코드이기 때문에 최상의 성능을 제공하면서도 개발자는 자신에게 가장 편리한 방식으로 코드를 작성할 수 있으니까요. (.vue, .jsx, react styled component 등)

    따라서 사용법만 조금 숙지한다면 webpack은 오히려 소스 수정을 더 편하게 만들어줍니다.
    만약 webpack을 사용하지 않고 순수한 바닐라 자바스크립트로 개발이 진행됬다면 오히려 더 소스 수정이 어렵고 더 많은 학습을 요구했으며, 엄청난 복잡도를 가졌을 것을 생각해주세요.

    새로운 기술을 맞이하기 위해서는 그만큼 자신들도 발전해야 합니다. 당장에 느끼는 불편함은 아직 경험하지 못했기 때문입니다.

    그리고 제가 출시하는 제품은 js 원본 소스가 포함되어 있습니다. cli 기반으로 npm이라는 프로그램이 컴퓨터에 깔려있다면 npm i npm run build 명령어만 치면 알아서 컴파일됩니다. 그리고 제가 본문에 언급한 내용을 보시면 주요 로직을 구현하는 vue는 런타임으로 돌아가기 때문에 webpack으로 번들링하는 것이 아닌 xe 템플릿 안에서 그대로 작성합니다. 즉, vue는 조금 배우셔야 겠지만 그 어떤 프로그램 설치도 없이 순수하게 layout.html을 수정하면 반영된다는 의미입니다.
  • profile
    어서 pc 화면도 보고 싶네요 이쁩니다!
  • profile
    기대하고 있습니다!! :D
  • profile
    와 기대되네요
  • ?
    기존 레이아웃의 업데이트가 아니라 신규 레이아웃인가요?
  • ? profile
    신규 레이아웃입니다^^
  • profile ?
    그럼 기존의 다크버전은 언제쯤 사용이 가능한가요?

    다크모드 적용하면은 사이드에 글자(더보기)가 안보이기도 하고 제한이 좀 있던거 같은데...
  • ? profile

    이퀴어 테마 패키지에서 레이아웃단의 다크테마는 최종 완성된 단계입니다. 그 외 에덴 게시판 스킨에 기존 적용된 다크테마는 실험적으로 개발된 것으로 공식지원 대상이 아닙니다. 화면을 따라오는 액션바 기능처럼 언제든지 사라질 수 있었던 기능이라는 의미입니다. 때문에 에덴 게시판의 공식 소개문에는 다크테마 지원에 대한 내용이 없습니다. 이전에 몇몇 서드파티에 대한 실험적 스킨이 패키지에 포함된 적이 있었는데 이후 버전을 거치며 제거된 것이 큰 사례라고 보시면 되겠습니다.