안녕하세요.
오랜만에 커뮤니티에 소식을 올리게 되었네요. 저는 요즘 운영 중인 스토어의 리뉴얼을 준비하고 있습니다. 아직 한창 개발이 진행 중이지만, 최근에 이룬 성과에 대해서 여러분들께 공유하고자 글을 올립니다.
자체 쇼핑몰 개발
기존 사이트는 XE로 운영되었고, 쇼핑몰은 누리고 쇼핑몰 모듈을 사용했지만 누리고 모듈이 공식적인 지원을 받지 않고 있으며, 디지털몰에 최적화되지 않았기 때문에 운영에 불편함이 많았습니다. 그리고 특히 요즘은 XE라는 플랫폼의 한계를 많이 느끼고 있습니다. 새로운 서비스를 준비하면서 제일 잘할 수 있는 방식으로 내 사이트부터 새롭게 만들어보자라는 생각으로 Node.js 기반 사이트를 개발하게 되었습니다.
처음부터 끝까지 직접 쇼핑몰을 자체 제작해야 했기 때문에 어려움이 있었고, 구현 스펙에서 제외된 기능들도 많았습니다.
결제는 자체 개발이 아닌 부트페이를 사용했습니다. 부트페이는 아임포트와 같이 결제 모듈을 제공하는 서비스입니다. 결제, 결제내역 관리, 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를 적용했습니다.
그리고 이번에 제작하는 레이아웃에서는 tailwindcss가 적용됩니다. 기존에는 프레임워크를 자체 제작했지만 이번에는 PostCSS 기반의 CSS 프레임워크가 적용됩니다. 다양한 커스터마이징이 가능하고, 기존의 CSS 프레임워크와는 완전히 다른 방향성을 가졌으며, 클래스 자체가 css 속성이 된다는 이 특유의 컨셉 때문에 디자인 자체에는 영향을 주지 않으면서 개발 편의성을 높인 것을 보고 채택하게 되었습니다. 물론 작년부터 현업에서 Vue 기반 프론트엔드 개발에 사용하고 있었으며, npm에서도 꾸준히 인기몰이를 하고 있는 녀석입니다.
webpack으로 번들링을 하기 때문에 다양한 방식의 접근이 가능했는데요.
먼저 컴포넌트별 css를 따로 번들링할 수 있게 되었습니다.
상단바, 버튼, 인풋 등의 컴포넌트에 대한 css가 기존에는 하나의 css파일로 컴파일되었기 때문에 사용하지 않는데도 불구하고 불필요한 css 코드를 매번 로드했으며, 하나의 파일로 로드하기 때문에 퍼포먼스에 영향을 주었습니다.
이제는 코어 역할을 할 tailwind를 제외하고 각각의 컴포넌트에서 자신의 css 파일(PostCSS는 js로 컴파일됩니다.)을 불러오도록 설계되었습니다.
당연히 SPA의 놀라운 개발 환경보다는 손이 가는 것들이 꽤 있지만 그래도 장족의 발전이라고 생각합니다. 개발의 편의성과 성능 향상을 이끌어 냈으니까요. 해당 프로젝트는 추후 보일러 플레이트 형태로 배포하여 다른 레이아웃을 개발하시는 분들이 쉽게 사용할 수 있는 오픈소스로 배포할 예정입니다. 괜찮은 아이디어라면 많은 굇수 분들이 더 좋게 만들어주시겠죠?!
단순한 소식 전달로 글을 쓰려고 했는데 XE 템플릿 얘기가 나왔네요.
다음 글에는 XE3에 대한 이야기로 글을 써보려고 합니다.
감사합니다.
저 같은 경우는 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로 하실 때도 개발속도가 엄청나셨는데, 이걸로 개발하시면 진짜 뚝딱이실거 같군요..
#부트페이
저도 사이트 새로 만들면 스토어에 이런 거나 붙일 실력이나 됐으면 좋겠습니다. ㅠㅠ
볼때마다 작업물이 경이롭네요 ㅠㅠ)/ 화이팅입니다.