Frontend (5) 썸네일형 리스트형 Mixpanel을 활용한 사용자 행동 패턴 분석(1) 들어가며: 사용자 피드백으로부터 시작된 개선부스트캠프에서 6주간 블록 코딩을 기반으로 정적 웹사이트를 만들 수 있는 BooLock 을 만들었다. 서비스를 완성한 후 캠퍼분들에게 서비스를 사용한 후 피드백을 부탁드렸었다. 여러 피드백을 바탕으로 서비스를 개선해 나갔지만 사용자는 자신의 행동 중 어디가 불편한지 잘 모르는 경우도 있고 데이터를 이용해서 행동 속에서 사용자의 불편함을 객관적으로 도출해보고 싶다는 생각이 들었다.Mixpanel을 통해 사용자 행동 흐름 분석하기mixpanel을 사용하면 사용자의 행동 흐름을 파악할 수 있도록 플로우 리포트를 제공한다. 사용자의 행동 흐름을 수집해서 보여줌 모두가 직관적으로 데이터를 보고 직접 분석도 할 수 있어야 설득력이 생긴다고 생각했다.Mixpanel이 사용자.. Chromium의 렌더링 파이프라인: Blockly는 왜 움직이는 블록을 다른 레이어로 분리할까? 목표브라우저 렌더링 과정 딥하게 이해하기(크롬을 기준으로 작성)브라우저 렌더링을 최적화하는 기법 알아보기들어가며 최근 한 프로젝트에서 Blockly라는 블록 코딩 라이브러리를 사용하다가 이상한 현상을 발견했습니다. 블록을 드래그하면 순간적으로 이상한 위치로 이동하는 문제였습니다. 문제의 원인을 파악하기 위해 Blockly의 GitHub 코드를 살펴보던 중, 흥미로운 점을 발견했습니다. 바로 블록의 드래그가 시작될 때 해당 블록이 특정 레이어(drag layer)로 이동한다는 점이었습니다. startDrag(e?: PointerEvent): void { ... this.workspace.getLayerManager()?.moveToDragLayer(this.block);} 왜 Blockly는 드래그되는.. SVG 파헤치기 SVG를 파헤치게 된 이유…블록 코딩 사이트를 만드는 팀 프로젝트를 진행하면서 blockly라는 블록 조립 라이브러리를 사용하게 되었다. 기획대로 UI를 수정하려고 보니 라이브러리의 많은 UI 요소들이 SVG로 만들어져 있었다. 이를 제대로 다루기 위해서는 SVG에 대한 이해가 선행되어야 된다고 생각했고 그래서 이 글에서 svg에 대해 알아보기로 했다.SVG 알아보기SVG는 뭐길래 안 깨지는 거니?SVG(Scalable Vector Graphics)는 이름에서 알 수 있듯이 벡터 기반의 그래픽 파일 포맷이다. JPEG와 같은 픽셀 기반의 래스터 파일과는 달리, SVG는 점과 선 등 기하학적 요소에 수학 공식을 적용해 이미지를 생성한다. 그래서 그래픽의 크기를 마음대로 조절해도 화질이 깨지지 않아 특히 아.. div 테두리 겹침 현상 해결하기 div의 테두리(border)가 겹치는 현상이 발생했다.border: 5px solid blue; 이 문제를 해결하기 위해서 구글링을 하다가 border-collapse 라는 속성을 알게 되었다. border-collapse는 표(table)에서 cell의 테두리가 분리(seperated)될지 상쇄(collapsed)될지 결정할 수 있는 속성이다. 근데 지금은 table의 cell이 아닌 div의 테두리가 겹치는 것이라서 다른 해결 방법이 필요해 보였다. 그때 한 동료분이 outline이라는 속성을 알려주셨다. mdn에 들어가서 outline에 대한 설명을 읽으면 border와의 차이점에 대해 나와있다.outline은 border와 다르게 콘텐츠 밖에 그려지며 절대 공간을 차지하지 않는다. 위의 예시에서.. offsetWidth으로 강제로 랜더링시키기 로그인과 회원가입 폼을 만들 때 로그인 화면에서 회원가입 버튼을 누르면 아래처럼 로그인 모달이 180도 가로로 뒤집히면서 회원가입 폼이 나타나게 하고 싶었다. 그래서 처음에는 180도 뒤집는 flip 애니메이션을 만든 뒤에 회원가입 버튼과 로그인 버튼의 click 이벤트 핸들러를 다음과 같이 작성했다.function animateForm() { const formWrapper = document.querySelector(".auth_form_wrapper"); formWrapper.classList.remove("animate_flip_reverse"); // 반대 애니메이션 제거 formWrapper.classList.add("animate_flip"); // 애니메이션 추가}function an.. 이전 1 다음
