vue.js 를 파이썬을 이용해서 Server Side Rendering 할 수 있을까를 찾아보다가 nunjucks를 발견했다.
nunjucks( https://mozilla.github.io/nunjucks/ ) 를 이용해서 jinja2 템플릿 문법으로 client side rendering 을 할 수 있다. jinja2 에서 제공하는 필터도 대부분 지원한다. 보안적인 부분만 조심한다면 기존에 만들어둔 jinja2 템플릿을 꽤 많이 재활용해서 사용할 수 있을 것 같다.
경우에 따라서 ajax 를 이용하는 경우 client side redering을 사용하는 편인데 그 때 lodash 에서 제공한 템플릿을 이용했다. lodash 도 좋긴 하지만 간혹 문법적인 문제를 찾기는 어려운데 이미 많이 적응된 jinja 문법을 client 에서도 사용할 수 있다면 꽤 유용할 것 같다.
요즘, 회사에서 CSS 를 정리하고 있다. 내가 CSS 를 많이 알고 있다고 생각하지만, CSS로 체계적으로 어떻게 디자인 하는지에 대해 배워본적이 없다. 그러다보니 이것저것 고민하는게 많다.
가장 고민하는 것은 margin vs padding 이다. 어떨때 margin 을 사용하는게 맞는지 어떨 때 padding 을 사용하는게 맞는지 잘 모르겠다. 확실히 border 가 있거나 background 가 있는 경우에는 margin 과 padding 이 확실히 차이가 있다. background-color 는 padding 까지만 적용된다. border 안쪽은 padding 영역이다. 그리고 margin 의 경우 clickable 하지 않다. 이런 경우 명확히 margin 과 padding 이 구별된다. 그 외에는 두 element 사이(경우에 따라서는 sibling 끼리, 경우에 따라서는 parent와 child사이) 를 어떻게 공간을 구별해야 하는지 잘모르겠다.
웹디자이너는 아니지만 sketch 로 UI를 만들어주는 디자이너와 이야기 하다보니 그 디자이너도 유사한 고민을 한다고 한다. 이야기를 계속 듣다보니 margin 보다는 padding 위주로 그리는 것 같이 느껴졌다. 특히 개념적인 box 안의 공간은 padding 위주로 그리는 공간을 띄우는 것 같았다.
그리고 margin 의 경우 vertical margin collapse 라고 해서 위 엘레멘트의 margin-bottom 과 아래 엘레멘트의 margin-top 이 합쳐져서 둘 중 가장 큰 것만 적용되는 현상이 있다. 이 rule 이 복잡하다보니 margin-bottom 만 주거나 margin-top 만 주는 방식으로 사용하는 경우가 꽤 있는 것 같다. 물론 경우에 따라서는 vertical margin collapse 을 이용해서 디자인 하기도 한다.
UI 를 디자인 하는 툴의 경우 그런 것 없어서 margin-top 과 margin-bottom 중 하나를 선택해야 한다. 같이 일하는 디자이너는 margin-bottom 위주로 작업한다고 한다. 이게 디자이너의 관념적인것인지 모르겠지만 나름 괜찮은 규칙인 것 같아서 나도 margin-bottom 위주로 작업하려고 한다.
그래서 내가 내린 결론은 margin vs padding 일 경우 margin 위주로
margin-top vs margin-bottom 의 경우 margin-bottom 이 좋을 것 같다.
그래서
<div class="outter">
<div class="inner1"></div><div class="inner1"></div> <div class="inner2"></div>
</div>
이런 식의 코드가 있다면
.outer 의 padding 을 잡고, .inner 의 margin-bottom 의 .inner1 , .inner2 고유의 간격을 만드는 형태로 해야 할 것 같다.
요즘 회사에서 사내 admin 을 만들고 있다. 사내 admin 사이트 이기 때문에 브라우저는 크롬으로 고정시켜서 개발 중인데, modal full popup을 만드는 중 CSS 스팩 중 vh 라는 단위를 사용하게 되었다.
https://www.w3schools.com/cssref/css_units.asp 에 따르면 vw, vh 는 뷰포트를 기준으로 하는 단위이다. 고맙게도 이 단위는 IE도 지원한다.
앞으로 사용할 일이 많이 생길 것 같다. 뷰포트는 브라우저가 보이는 화면 크기이다. 당연히 브라우저 크기를 조절하게 되면 이 크기도 당연히 변경되게 된다.
css 의 기능이 많아지면 UI를 만드는 과정에서 javascript 를 사용할 일이 줄어들어 공수가 많이 줄어든다. 이 단위를 지원하지 않았다면 브라우저 크기를 측정하는 것을 javascript 로 구해와야 한다. 그리고 기획에 따라서는 브라우저 크기를 조절하면 자동으로 크기가 조절되기를 원할것이다. 이 경우 자바스크립트로 resize 이벤트를 처리해야 한다. 이 경우 더더욱 공수가 많이 들게 된다.
어째든 IE 까지 지원하는 좋은 속성이다. 근데 정말 IE는 이제 안 사용했으면 좋겠다.