# ux engineering
[UX Engineering] [Design System] 적용 일지 2
코드 컨벤션 제작 후 저희는 공통 컴포넌트를 어떻게 프로젝트에서 구축해 갈지 전략을 세웠습니다. 폴더링 > 모듈화 일단 현 프론트엔드 프로젝트의 src/.../common 의 디렉토리에서 시작하기로 했습니다. 그리고 프론트엔드 개발자가 헷갈리지 않게 src/.../common/osds (os design system)으로 다시 세분화 했습니다. > 장기적으로 storybook을 테스팅&커뮤니케이션 도구로 고려하고 있으며, rollup을 통해 모듈화하는 방법을 공부하고 있습니당. UI 추상화 전략 저희 팀 GUI 가이드는 이미 디자인시스템을 만들기위한 공통 룰이 잘 정리가 되어있었기 때문에 (Figma의 Component 기능을 적극 활용한 가이드) 추상화하는 과정이 수월했습니다. 
[UX Engineering] [Design System] 적용 일지 1 - 스타일 코드 컨벤션
최근 시작한 프로젝트에서는 공통 UI 컴포넌트를 정의하는 일이 중요해보였습니다. 스타일이 정의된 클래스 이름이 여러 개 검색되는 현상을 확인하고 ... 조금 당황했습니다. UI관리가 필요하다고 느꼈습니다. 함께 작업하시는 분의 생각과 가치관도 운이 좋게 저와 같았습니다. 🤗 그래서 저희는 UX Engineer의 Vision과 Role을 이해하고 프론트엔드 개발자에게 협의할 자료를 만들기 시작했습니다. storybook, framer 와 같은 툴 부터 MUI, attlassian, toss 등 우수한 사례의 레퍼런스를 확인했고, 현재 프로젝트 단계와 저희가 처리할 수 있는 업무량을 고려하여 다음과 같이 작업 전략을 수립했습니다. 1 - 스타일 코드 컨벤션 > 어떻게 스타일 속성을 관리할 것인가? 작성 배경 css 의 가장 큰 특징은 사고적으로 에러인 상황을 걸러내지 못한다는 점입니다. > ** 😣 왜 디버깅을 할 수 없을까용? -> �
[UX Engineering] [IDE] [VS code] Extension & Setting recommendation + shortcuts
저는 vscode 좋아합니다. python은 pycharm 이 좋은거 같은데 javascript는 vscode가 짱입니다. Visual Studio는 학부 시절에 쓴거 같습니다... vim은 트라우마 있어서 별로 안좋아합니다... 맨날 인터넷에 vim 단축키 검색합니다... 😥 그래도 이 단축키 알고 있으면 가끔 커맨드창 다룰때 도움되기는 하더라구용... UI 개발, svg, interaction 등 이제 관련 일을 시작한지 1년이 다 되어가네요. 😎 제가 코드 짜면서 유용했던 Extension, Setting, shortcut 공유해 보겠습니다. 저는 이것저것 찾아보는거랑 드림코딩 유튜브에서 도움을
[UX Engineering] [DevTools] 활용
DevTools 어디까지 활용할 수 있을까? references developer.chrome - UX Report, Chrome DevTools 확인. 남들 모르는 크롬 개발자도구 소소한 기능 8개 - 유쾌하고 명료. [NHN FORWARD 2020] 천천히 읽어 보는 Chrome 개발자 도구 설명서 - 서론이 조금 긴편이지만 좋은 취지를 알 수 있음. E02-3-React. 디버깅 방법, 정보를 얻는 방법 - React 디버깅 방법 가르쳐 줌. (설명해주시는 분이 velog.io 개발자님...ㅇㅁㅇ) shortc