전체 글 (15) 썸네일형 리스트형 UX 객관화_web vitals UX (User Experience, 사용자 경험성)는 사용자가 제품을 사용하며 발생하는 경험성을 일컫는 말로, 경험성이란 개인의 경험이나 배경지식에 따라 수준이 달라지는 주관적인 부분이 존재한다. 프론트엔드 개발자로서 UI를 설계하고 더 좋은 UX를 사용자에게 제공하기 위해 고민하고 논의하지만 주관적인 영역을 갖고 좋은 답을 유도하기란 쉽지 않다. 그렇기에 UX를 계측할 수 있는 기준이 중요해지는데 보통 UX를 계측하기 위한 방식을 이야기하면 A/B 테스팅 대조실험을 이야기한다. 둘 다 해보고 더 좋은걸 한다는 접근에서 UX를 개선하기 위한 좋은 접근이라고 생각한다. 하지만, A,B 두 기능을 모두 만들어야 하는 비용적인 측면과 부적적인 피드백이 나온 집군의 사용자에게는 불편함을 제공한다는 점에서 이상.. 주석 진실은 한 곳에만 존재한다. 바로 코드다. 코드만이 자기가 하는 일을 진실되게 말한다. 코드만이 정확한 정보를 제공하는 유일한 출처다. 그러므로 우리는 주석을 가능한 줄이도록 꾸준히 노력해야 한다. _클린코드, 4장 주석, 69p 클린코드를 보다 공감하는 부분이 생겨 작성해보려고 한다. 백엔드 개발자분과 swagger를 통해 소통하는 프로젝트였는데, 서버로부터 오는 내용과 api spec간의 차이가 발생해 tslint에러가 발생하는 문제로 난처한적이있었다. 이러한 문제가 발생하게 된 이유는 백엔드에서 api spec 관리를 커멘트기반의 swagger generation을 도입하고 있었고 ( B ) backend code generation frontend code generation --- ( A ) b.. 본질과 맹점 인간이 위대해지기 위한 나의 처방전은 아모르파티다. 있는 그대로 외에 아무것도 바라지 않는 것이다. 미래에도, 과거에도, 영원히. 필연적인 일을 단지 견디기만 하는 것이 아니라, 사랑하는 것이다. _ 프리드리히 니체 _ 클린 코드 - 로버트 C. 마틴 에 첫 단원에 깨끗한 코드에서 보이스카우트 규칙이 나옵니다. 캠프장은 처음 왔을 때보다 더 깨끗하게 해 놓고 떠나라. 코드를 깨끗하게 유지하기 위해서 더러운 것들을 눈에 보였을 때 치우라는 지속적 개선을 추구하는 것다. 제가 본 핵심은 더 깨끗하기 만하면 된 겁니다. 쓰레기를 청소하려고 바닥만 보다 보면 길을 잃기 쉽다고 생각합니다. 내가 체크인 한 본질을 잊고 청소가 커지면 커밋이 지저분해진다는 것도 명심해야 합니다. 눈에 보인 가벼운 것만 하고 오래 걸.. SVG 어디까지 써봤니? 웹에서 이미지를 표현하는 방식에는 크게 두 가지로 볼 수 있는데, 하나는 jpg, png와 같은 비트맵 방식이고, 다른 하나는 벡터 이미지인 svg이다. SVG는 Scalable Vector Graphics로 경로(path)와 점(point) 같은 요소를 XML로 표현한 벡터 방식의 이미지로 크기를 늘리거나 줄이는 것에 열화가 되지 않아 icon이나 brand logo를 넣는 것에 많이 사용하게 되고, 그래프를 그리는 경우에도 svg를 활용하여 그릴 수도 있다. 우리를 고통스럽게 하는 건 위와 같은 경우가 있기 때문이다. svg의 스펙은 W3C에서 관리하는 스펙에 따라 관리되고 있지만, 이를 웹에 노출하는 방식에는 많은 선택지들이 존재하게 된다. # XML 가장 기본적으로 우리가 많이 접하는 형태이다. .. 취하기 쉬운날. 보호되어 있는 글입니다. 크롬에서 네트워크 이슈 대응하기. 작업을 하다보면 크롬의 네트워크 보안정책에 의해서 문제가 발생할땐 devtool만으로는 원인을 찾아가기 힘든때가 있다. Capture Network Log chrome://net-export/ 주소 표시줄에 chrome://net-export/ 를 입력하고 Enter 키를 누릅니다. Logging을 시작해주고, 레코딩 파일을 저장 할 위치를 설정합니다. 문제가 있는 페이지를 엽니다. net-internals로 돌아가 레코드를 완료합니다. 녹화된 로그 파일은 https://netlog-viewer.appspot.com/#import 를 활용해서 분석 할 수 있습니다. t=2293751 [st=20] +HTTP_TRANSACTION_SEND_REQUEST [dt=0] t=2293751 [st=20] HTTP.. 로컬환경에서 실데이터 테스트 환경 구성하기 로컬에서 프런트를 개발하다 보면, 실제 나가 있는 서버의 데이터를 직접 가져다가 테스트를 해보고 싶은 경우가 생기게 된다. 그러나 프로덕션 혹은 알파 환경에는 해당 페이지의 인증(쿠키)이 필요해서 로컬에서 테스트 해보려할때 사용하는 방식을 기록해두려 한다. 예시는 tistory.com의 쿠키를 활용해서 CRA를 통해 만들어진 React 앱에서 요청해보는 것으로 잡는다. localhost 수정하기 CRA는 HOST 환경변수를 이용해서 url 커스터마이즈를 제공한다. // package.json ... "scripts": { "start": "HOST=local.tistory.com react-scripts start", ... } ... 이렇게 한다고 해도 webpack dev server의 HOST만을 .. userinyerface를 통한 고통 맛보기 Page 2 (3) position: fixed; fixed 된 콘텐츠는 항상 사용자의 화면에 노출되기에 사용자의 관심을 끌게 만드는 좋은 방법 중 하나입니다. 다만 위 사진과 같이 콘텐츠가 다른 콘텐츠를 가리는 경우가 발생할 수 있기에 위치를 설정하는 것도 중요해집니다. 사용자가 필요도 없는 컨탠츠로 인해서 중요한 내용을 가리게 된다면, 이는 전적으로 ux디자인의 실패를 의미하게 됩니다. 그리고 지나친 고정 위치는 시선 분산을 발생시키고 방문자가 이루고자하는 목적을 방해할 수도 있습니다. 그렇기에 fixed 된 컨탠츠를 도입할 때는 사용자가 페이지에서 이루고자 하는 목적을 바탕으로 신중하게 도입을 검토해야죠. 말도 안 되는 형식의 input들 앞선 글에서 제이콥 법칙을 언급한 적이 있습니다. 사용자는 이페이지에 오기 전.. 이전 1 2 다음
