커뮤니티토픽게시판

 

148e84ca714bfb813a61b6c6c2b1c1b9.png.jpg

 

안녕하세요.

오랜만에 커뮤니티에 소식을 올리게 되었네요. 저는 요즘 운영 중인 스토어의 리뉴얼을 준비하고 있습니다. 아직 한창 개발이 진행 중이지만, 최근에 이룬 성과에 대해서 여러분들께 공유하고자 글을 올립니다.

 

자체 쇼핑몰 개발

기존 사이트는 XE로 운영되었고, 쇼핑몰은 누리고 쇼핑몰 모듈을 사용했지만 누리고 모듈이 공식적인 지원을 받지 않고 있으며, 디지털몰에 최적화되지 않았기 때문에 운영에 불편함이 많았습니다. 그리고 특히 요즘은 XE라는 플랫폼의 한계를 많이 느끼고 있습니다. 새로운 서비스를 준비하면서 제일 잘할 수 있는 방식으로 내 사이트부터 새롭게 만들어보자라는 생각으로 Node.js 기반 사이트를 개발하게 되었습니다.

처음부터 끝까지 직접 쇼핑몰을 자체 제작해야 했기 때문에 어려움이 있었고, 구현 스펙에서 제외된 기능들도 많았습니다.

 

스크린샷 2020-04-16 오전 2.08.27.png.jpg

https://www.bootpay.co.kr/

 

결제는 자체 개발이 아닌 부트페이를 사용했습니다. 부트페이는 아임포트와 같이 결제 모듈을 제공하는 서비스입니다. 결제, 결제내역 관리, PG사 관리가 가능하며, 아임포트와의 큰 차별점은 자체적인 통합 결제창을 제공한다는 것입니다. 부트페이를 연동하여 결제 과정은 생각보다 쉽게 구현되었습니다.

 

현재까지 구현된 단계는 회원가입 후 상품을 장바구니에 담아 결제하고 결제가 승인되면 해당 상품에 대한 다운로드 권한을 부여하는 것까지 완료되었습니다. 아마존 S3에 업로드된 프라이빗 파일을 권한에 따라 다운받을 수 있게 하는 기능도 개발했습니다. 처음에 구현하기 위해 자료를 찾을 때만 해도 참 복잡했는데 구현하고 보니 뭐 없더군요... S3 자체가 퍼블릭이 아니기 때문에 무조건 서버를 통해서만 파일 다운받을 수 있게 되었습니다.

 

 

PostCSS가 적용된 새로운 레이아웃 개발 중

리뉴얼을 준비하면서 새로운 개발 정책을 준비하고 있습니다. 얼리액세스 제품은 더이상 개발되지 않으며, 짧은 생존율을 가진 제품을 빠르게 만드는 방식으로 변모하기로 했습니다. 이를 위해서 중요한 것은 DevOps라고 생각합니다. 제가 하나의 쇼핑몰 솔루션을 한달도 채 되지 않은 기간 내에 구현하게 된 것은 광활하고 진보된 node.js 생태계와 높은 수준의 DevOps 덕분입니다.

 

폭넓은 확장성, 최신기술의 적용, 간편하고 직관적인 코드 관리가 가능하기 때문에 XE 레이아웃 하나 만들 때보다 훨씬 빠르게 개발할 수 있고, 그러면서도 더 다양한 기능들을 구현할 수 있게 됬습니다. 옆동네 그누보드(sir) 진영만 봐도 개발에 webpack을 적용하는 사례가 심심찮게 보였습니다. 그리고 그쪽은 좀 더 자유로운 개발이 가능한 것이 개발자 친화적이고, 순수 php 기반이기 때문입니다.

 

XE의 강점이자 또한 단점이 XE 템플릿 문법입니다. lint도 없는 이 친구는 프론트엔드를 더 깊게 파면 팔수록 거지같습니다. 정말 이 한 단어로 축약할 수 있어요. 거지같아요. 독립적인 문법이다보니 xe라는 생태계 안에서 발전할 수 밖에 없고, 이는 너무나도 폐쇄적인 구조입니다.

 

단적으로 저같은 경우 모든 디자인을 css가 아닌 sass로 하는데요. XE 자체에는 sass를 읽을 로더가 없습니다. 라이믹스에는 less가 있지만 라이믹스용 레이아웃을 개발하면 기존 xe 유저는 모두 버리는 꼴이 됩니다. 그래서 결국 직접 sass를 컴파일해주게 되었는데요. react의 styledComponent, vue의 Single file components를 쓰다가 다시 xe 코드를 건드리려니 속이 터지려고 하더군요. 그래서 간신히 멘탈을 부여잡고 기존에 없던(아니면 아직 발견하지 못한) XE 환경에서 DevOps 강화해보기로 했습니다.

 

서론이 굉장히 길었네요.

 

일단 먼저 webpack을 적용했습니다. es6 문법을 사용하기 위해 바벨을 적용했고, 스타일 개발의 끝판왕 PostCSS를 적용했습니다.

 

https://tailwindcss.com/

그리고 이번에 제작하는 레이아웃에서는 tailwindcss가 적용됩니다. 기존에는 프레임워크를 자체 제작했지만 이번에는 PostCSS 기반의 CSS 프레임워크가 적용됩니다. 다양한 커스터마이징이 가능하고, 기존의 CSS 프레임워크와는 완전히 다른 방향성을 가졌으며, 클래스 자체가 css 속성이 된다는 이 특유의 컨셉 때문에 디자인 자체에는 영향을 주지 않으면서 개발 편의성을 높인 것을 보고 채택하게 되었습니다. 물론 작년부터 현업에서 Vue 기반 프론트엔드 개발에 사용하고 있었으며, npm에서도 꾸준히 인기몰이를 하고 있는 녀석입니다.

 

스크린샷 2020-04-16 오전 2.49.06.png

webpack으로 번들링을 하기 때문에 다양한 방식의 접근이 가능했는데요.

먼저 컴포넌트별 css를 따로 번들링할 수 있게 되었습니다.

 

상단바, 버튼, 인풋 등의 컴포넌트에 대한 css가 기존에는 하나의 css파일로 컴파일되었기 때문에 사용하지 않는데도 불구하고 불필요한 css 코드를 매번 로드했으며, 하나의 파일로 로드하기 때문에 퍼포먼스에 영향을 주었습니다.

이제는 코어 역할을 할 tailwind를 제외하고 각각의 컴포넌트에서 자신의 css 파일(PostCSS는 js로 컴파일됩니다.)을 불러오도록 설계되었습니다.

 

당연히 SPA의 놀라운 개발 환경보다는 손이 가는 것들이 꽤 있지만 그래도 장족의 발전이라고 생각합니다. 개발의 편의성과 성능 향상을 이끌어 냈으니까요. 해당 프로젝트는 추후 보일러 플레이트 형태로 배포하여 다른 레이아웃을 개발하시는 분들이 쉽게 사용할 수 있는 오픈소스로 배포할 예정입니다. 괜찮은 아이디어라면 많은 굇수 분들이 더 좋게 만들어주시겠죠?!

 

 

단순한 소식 전달로 글을 쓰려고 했는데 XE 템플릿 얘기가 나왔네요.

다음 글에는 XE3에 대한 이야기로 글을 써보려고 합니다.

감사합니다.

 

글쓴이 snax

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

XE & Rhymix 제작 자료
equeer 레이아웃: https://calvinsnax.com/equeer
XE 알림센터 모듈 스킨 C!rculator Lite: https://winx.kr/Ea5QVRoF
  • profile
    이런 굇수같은 분..ㅠ)/ 어느 새 저 멀리 또 가계시네요.
    저 같은 경우는 scss를 스낙스님 레이아웃 보고 처음 접해서
    그 뒤로 현재까지 잘 쓰고 있습니다.

    처음엔 이게 뭔가 한참을 삽질했었는데 이제는 처음 세팅할 때 빼곤 그나마 잘 쓰고 있습니다.
    전 phpstorm 에디터에 node-sass, npm-module을 피씨에 설치해서
    자동으로 에디터 내에 filewatcher라는 기능으로 css로 컴파일해주고 있는데요,

    아직 gulp나 webpack은 뭔지 몰라서 그냥 이 정도로 만족하고 쓰고 있어요.

    #postcss란?
    https://medium.com/@FourwingsY/postcss-%EC%86%8C%EA%B0%9C-727310aa6505

    일단 찾아보니 기존 sass 사용하는 것과 사용한 결과물에는 큰 차이가 없는거 같아서
    어려우니깐 지금 쓰는 방법대로 css는 쓰면 될거 같고..

    아직 웹팩이나 바닐라 자바스크립트도 너무 어려우니깐 그것도 패스하고..ㅠㅠ

    #tailwindcss
    와, 이걸 쓰게 되면 반응형 작업시나 엄청 편하겠군요...
    어쩜 이런걸 뚝딱뚝딱 잘 알고 쓰시는지.. ㅠ
    저 같은 경우는 혼자 일주일은 기본 삽질해서 겨우 걸음마 수준인데..엄지 척이네요.

    일전에 sass로 하실 때도 개발속도가 엄청나셨는데, 이걸로 개발하시면 진짜 뚝딱이실거 같군요..

    #부트페이
    저도 사이트 새로 만들면 스토어에 이런 거나 붙일 실력이나 됐으면 좋겠습니다. ㅠㅠ

    볼때마다 작업물이 경이롭네요 ㅠㅠ)/ 화이팅입니다.
  • ?
    신규 레이아웃 기대하고 있습니다..!!
  • profile
    화이팅하세요 :)
  • profile
    snax님 글을 보다보면 역시 취미생활로 그친 게 다행이라는 생각이 듭니다ㅋㅋ
    그나저나 이 취미도 언젠가 고인물이 되지 않을까 걱정스럽네요ㅎㅎ
  • profile profile
    여태 모듈 하나 못만듭니다ㅠㅠ 그저 개발 영역이 다를 뿐, 저도 한참 배우는 사람이에요. js 생태계의 특혜를 좀 받았을 뿐입니다.
  • profile
    엄청 기대하고 있습니다 🔥
  • profile
    역시 능력자 입니다!
    저도 쇼핑몰 제작중인데 아임포트를 결제로 사용하려고 하는데 부트페이도 한번 알아봐야겠네요.
  • profile
    평소 글을 많이 쓰고, 개발 관련글도 많이 읽는데, snax님 리얼 능력자라는게 보입니다!
    그러고보니 xe쓰면서 유일하게 상용구매한게 이퀴어랑 hios네요
  • profile

    XE는 아무래도 맨땅에 PHP가 아니라 batteries included 접근방식을 택하고 있으니... 사용자 입장에서는 이것저것 마음대로 설치해서 조합할 수 있다는 장점이 있지만 개발자 입장에서는 제한이 많지요. 여기에 대해서는 예전에 저도 한 번 입장을 밝힌 바 있습니다.

     

    솔직히 webpack 정도는 XE 레이아웃에서 쓰지 못할 이유가 전혀 없으니 개발자분들도 마음껏 써주시면 좋겠습니다. 코어와 충돌할 가능성이 있는 것은 기껏해야 jQuery 정도인데, externals로 빼버리고 자기 자료에서 사용하는 것만 webpack으로 묶으면 되니까요. XE는 여러 사람의 자료를 조합해서 돌리는 것이니, 코어나 다른 자료에서 쓰는 것까지 모조리 묶으려고 지나치게 야심차게 접근하지만 않으면 됩니다.

     

    SCSS처럼 코어에서 지원해줄 필요가 있는 부분은... 어서 라이믹스로 넘어오세요. ㅋㅋㅋㅋㅋ 저도 라이믹스 전용으로 개발하는 것들은 이미 오래 전에 SCSS로 넘어왔습니다.

     

    XE에서 SCSS나 LESS를 사용할 수 있도록 모듈이나 애드온을 만드는 것도 아주 어렵지는 않을 것 같습니다. 적당한 시점에 트리거 걸어서 FrontEndFileHandler를 조작하면 될 것 같은데... 예전에 제가 CSS, JS 파일 합치기 애드온 만들면서 이 부분을 건드려 봤거든요. 개념은 간단한데 타이밍이 골때립니다. 만약 이게 가능하다면 레이아웃은 그냥 SCSS로 개발해서 배포하고, "XE 사용자는 이 모듈을 추가로 설치하세요!"라고 안내하면 되겠지요.

  • profile profile
    webpack을 쓰는 쪽이 뭔가 서버 자원을 덜 쓰는 느낌이라서 webpack으로 구현하는 쪽을 선호하게 되는 것 같아요. 그래도 라이믹스는 안되는게 없네요...ㅠ 다음에 만드는 제품들은 아에 라이믹스 전용 딱지 붙여놓고 내놓을까 생각 중입니다.
  • profile
    여기 내용은 제가 이해를 잘 못하겠네요^^;
    XE구조 및 PHP, CSS기본밖에 모르는데...
    여러가지 기능들이 있네요. 많이 배우고 갑니다~~
  • profile
    띠용!? 콘텐츠몰 운영에 한계를 느끼고 있는데 혹시 쇼핑몰,콘텐츠몰 운영하기 편하게 개발해주시기만 하면야 무조건 삽니다 ㅠㅠㅠㅠ
  • profile
    믿고 씁니다.
    기대하고 있습니다.