equeer 레이아웃 소스를 갈아엎고 있습니다.

유료 버전 레이아웃을 준비하기 위해 코드를 새로 짜고 있어요.

기존의 equeer 레이아웃은 camelCase와 UnderScore( _ )를 짬뽕(...)한 의미없는 클래스명에 다른 레이아웃을 참고하면서 작성하다보니 다소 가독성이 떨어지는 오래 전 작성법으로 CSS를 작성했었습니다. CSS 구조도 재사용성이 낮은 관계형(wrap, wrapper 등 다단식으로 클래스명을 지정하는 구조)으로 작성하다보니 복잡하고, 활용도가 떨어졌습니다.

이번에 새로 작성하게 된 코드에서는 클래스명에 hypen(-)을 사용하고 컴포넌트 단위로 네이밍을 작성하여 유의미한(Semantic) 클래스 규칙을 갖습니다. 또한 유지보수와 확장성을 위해 UI Framework처럼 소스들을 목적에 따라 모듈화합니다.

목적에 따라 분류된 스타일 시트들은 Sass의 기능을 통해 재사용성이 더 높아졌습니다. 자바 스크립트를 사용하지 않아도 Sass의 변수 기능을 통해 같은 목적과 값을 가지는 코드를 한 번에 바꿀 수 있습니다. _variables.scss에서 전역 변수들을 지정해놓고 값만 바꿔주면 모든 스타일 시트에서 값이 자동으로 바뀝니다. 예를 들어 레이아웃 사용자가 본인이 원하는 색으로 primary 컬러를 변경하면 그 색상에 맞춰 밝기가 다른 4개의 색상을 자동으로 만들어 줍니다.

짬을 내서 하는 작업이라 출시까지는 오래 걸리겠지만 이번작은 좀 더 큰 프로젝트로 키워보고 싶은 욕심이 나네요.

물론 새로 갈아엎는 버전도 무료 버전을 따로 배포할 예정입니다. 다만 코드를 통채로 자기꺼 마냥 쓰시는 분이 계셔서ㅎ... CSS Moduler로 클래스명을 맛있게 볶아드릴 예정입니다.