본문 바로가기

개발

 (11)
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..
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들 앞선 글에서 제이콥 법칙을 언급한 적이 있습니다. 사용자는 이페이지에 오기 전..
userinyerface를 통한 고통 맛보기 Page 2 (2) Password 사이트들에 가입을 시도하다 보면, password의 복잡성을 근거로 사용자에게 더 강력한 암호를 사용하라고 권고하는 경우를 많이 발견하게 된다. 패스워드는 노출되게 되면 사용자에 대한 정보와 신원이 유출될 수 있기에 서비스 입장에서는 사용자가 안전하게 사용하는 걸 권고할 수는 있다. 역설적이게도 위와 같은 형태로 '키릴 문자를 넣어야 한다', '대문자를 넣어야 한다'와 같은 패턴을 제시하는 것은 패스워드를 더 복잡하게 만들게 할 거 같지만 이런 형태의 암호는 사용자가 생소한 복잡한 암호패턴을 기억하기 쉽게 하려고 단순한 형태를 만들어 내기 때문에 해킹의 위험을 낮추는 거에 별로 효과적이지 않다. ( 나만해도 저 패턴을 지키기위해 예시로 만든 암호는 `MyPasswordIsWoody1234..
userinyerface를 통한 고통 맛보기 Page 2 (1) Cumulative Layout Shift 두 번째 페이지를 열자마자 빨간 상자가 모든 콘텐츠를 밀어버리며 등장한다 (어지럽다.) 여기에서 Web Vitals중 CLS에 대해서 이야기가 필요해보인다. CLS는 직역하면 누적 레이아웃 이동으로 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수치화해서 시각 정인 안정성을 측정한 수치입니다. 위와 같이 버튼을 누르려고 하던가 값을 입력하고자 할 때 비동기식으로 로드되는 콘텐츠에 의해서 대상이 이동하게 되면 잘못된 콘텐츠를 클릭을 유발해 사용자에게 불편함을 준다. 해당 콘텐츠는 쿠키에 대해서 베너를 일부로 띄운 거지만, 종종 페이지에서 이미지나 동영상의 크기가 지정되지 않아서 콘텐츠가 로드되는 과정에 콘텐츠를 이동해 CLS빈도가 높아져 UX를 떨어뜨리게 ..

티스토리툴바