2017년 4월에 진행했던 내부 툴 개선 프로젝트에서 프로젝트 문서관리, 기획, 와이어프레임, 디자인, 마크업를 맡았었다. 현재 운영 툴은 장고에서 자동으로 제작되는 형식이나 백엔드 개발자 분께서 만들어주시는 형태여서 툴의 UI/UX 적 측면을 고려하기 보다는 쓰는 사람이 빨리 툴에 적응하는게 더 편한 상태였다. 워낙 많은 양의 툴이 있기 때문에 하나씩 옮기는 것을 목표로 진행했다. 다른 과제들의 우선순위에 밀려 3가지 정도 툴을 진행하고 일시정지 되었다. 부트스트랩을 사용하지 않고 필요한 부분만 참고하면서 MMT 만의 컴포넌트를 제작하는 과정이 흥미로웠다. 내부 운영 툴이므로 부분 스크린샷만 첨부한다.

letter-spacing 을 쓰다가 이상한 글자를 발견했다. fi 가 떨어지지 않고 계속 붙어있는 것이다. Sketch에서도 이와 같은 이슈가 있었다는 걸 알았는데, CSS에서도 동일한 현상이 발견되었다. 근본적인 원인은 fi 은 ligature(합자)여서 한글의 ㅃ과 같이 한 글자로 인식하는 것이었다. 모든 폰트에서는 발생하는 것은 아니고 'Roboto Condensed'를 사용했을 때 발생했다. ligature(합자)① 두 글자 또는 세 글자를 합하여 한 글자로 만드는 것. 현대 한글 활자꼴의 ‘ㅃ ’의 경우 세로줄기 하나가 생략되어 사용되는 경우가 있는데 이런 경우를 이음자라 한다. 로마글의 리가츄어(ligature).② 둘 이상의 글자를 합하여 하나로 주조한 활자를 말하며, 구문 활자에는 fi,..

https://ux.stackexchange.com/questions/83184/is-user-select-none-bad-ux/83249https://www.webpagefx.com/blog/web-design/disable-text-selection/https://blogs.msdn.microsoft.com/ie_ko/2012/01/18/css-user-select/https://css-tricks.com/almanac/properties/u/user-select/http://caniuse.com/#search=user-select

--> https://github.com/filamentgroup/tablesaw/issues/58 table { table-layout: fixed; min-width: 100%; max-width: none; width: auto; }

▼ ▼ ▼ ▼ ▼ http://mymusictaste.github.io/

이런 디자인의 버튼이 있을 때, 폰트에 그라디언트만 적용할 수 있다면 굳이 이미지 에셋으로 뽑지 않아도 된다. [참고]https://css-tricks.com/snippets/css/gradient-text/http://caniuse.com/#search=-webkit-background-cliphttp://caniuse.com/#search=-webkit-text-fill-color See the Pen [CSS] font gradient by zinee (@zineeworld) on CodePen.

마크업에서 단순히 아이템들이 채워져 있는 모습을 보여주기 위해 반복되는 돔을 Ctrl+C/V 해놓는 경우가 많은데, 템플릿으로 분리하고 필요한 갯수만큼만 스크립트로 반복해서 삽입할 수 있도록 했다. HTML JS function cloneChild(target, n){ for(var i=1; i

See the Pen [CSS Drawing] Single Element Profile (ZINEE) by zinee (@zineeworld) on CodePen. 정말 오랜만에 CSS 드로잉!단일 요소만 사용해서 모두 box-shadow로 그렸습니다 :-)

IssueiOS 하위 버전(10미만)에서 auto copy가 안 되는 이슈가 있어서, 인풋 영역을 터치하면 자동으로 영역을 잡아주는 기능으로 대체했다. 적어도 드래그 하면서 셀렉트 영역을 잡는 수고로움을 덜어주기 위해! 그런데 select()만으로는 iOS 에서 영역이 전체 선택되지 않고, readonly 임에도 불구하고 커서가 나타났다 (키보드 없이). 그래서 찾아보니 setSelectionRange()를 사용하면 된다는 걸 알았다. Syntax inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection); [참고] https://developer.mozilla.org/ko/docs/Web/API/H..