minliz 님의 블로그

서비스를 실사용자에게 배포하고 나니, 단순 “잘 동작한다/안 한다”를 넘어 사용자가 실제로 어디를 누르고, 어디에서 머무르고, 어디에서 떠나는지가 더 중요해졌습니다.그래서 저희는 Hotjar(히트맵/스크롤맵/세션 리플레이)를 적극 활용해 데이터 기반으로 UX를 개선했습니다.핵심 메시지이자 목표: “예쁘게 만드는 것”보다 실제 사용 행동을 보고 설계하면, 클릭률/완료율이 오른다.1) 우리가 본 것: 주요 분석 포인트히트맵(Click/Move)클릭 집중/사각지대를 한눈에 확인 → CTA, 탭, 마커 등 “실제 상호작용 지점” 파악메뉴/탭/프로필/말풍선 등 의도치 않은 클릭 패턴도 발견스크롤 맵중간 이탈 구간 파악 → CTA/핵심 문구를 그 위치로 재배치긴 페이지에서 “끝까지 보는 비율”을 수치로 확인이탈 위..

1편에서는 UX 문제(입력창, 키보드, 이미지 호환성)를 다뤘습니다.2025.08.21 - [Developer Should Know] - 실시간 채팅 UX 삽질기 (1편) – 맥북, 모바일, 브라우저에서 터진 문제들 실시간 채팅 UX 삽질기 (1편) – 맥북, 모바일, 브라우저에서 터진 문제들실시간 채팅을 개발하다 보면 서버, 프로토콜 같은 기술적인 문제뿐 아니라 사용자가 직접 체감하는 UX 버그가 자주 터집니다.이번 글에서는 제가 직접 겪었던 입력창, 키보드, 브라우저 호환성minliz.tistory.com 이번 편에서는 실시간 채팅(WebSocket & STOMP) 개발 과정에서 겪었던 삽질기와, 이를 해결하기 위해 도입한 Redis 기반 서버 개편과 낙관적 업데이트(optimistic UI) 전략을..

실시간 채팅을 개발하다 보면 서버, 프로토콜 같은 기술적인 문제뿐 아니라 사용자가 직접 체감하는 UX 버그가 자주 터집니다.이번 글에서는 제가 직접 겪었던 입력창, 키보드, 브라우저 호환성 문제들을 어떻게 해결했는지 공유해보려고 합니다.1. 맥북에서 마지막 글자가 한 번 더 입력되는 이슈저는 윈도우 유저라서 전혀 눈치 못 채고 있었는데, 맥북 유저분이 피드백을 주셨습니다.“왜 엔터 치면 마지막 글자가 두 번 찍혀요?” 😲맥북(특히 사파리)에서만 발생했고, 처음엔 백엔드가 메시지를 중복 저장하는 줄 알았습니다.로그를 찍어보니 서버에는 한 번만 들어오는데, 프론트 콘솔에서는 두 번 출력되는 상황이었죠.// Enter 키를 누를 때const handleKeyDown = useCallback((e) => { ..

Next.js는 왜 페이지를 두 번 그릴까?“Next.js는 페이지를 두 번 그립니다.”처음 듣는다면 이상하게 느껴질 수 있지만, 이건 Next.js의 핵심적인 렌더링 전략이에요.이번 글에서는 Next.js가 어떻게 페이지를 그리고, 왜 그렇게 설계되었는지를 쉽게 설명해보려고 해요.✨미리보는 핵심 요약Next.js는 서버에서 HTML과 설명서(RSC)를 먼저 만들어 보내요.그다음 브라우저가 이걸 받아서 인터랙션 가능한 페이지로 조립해요.이 두 단계 덕분에 빠른 로딩과 부드러운 페이지 전환이 동시에 가능해져요!1단계: 서버에서 먼저 그리기 (SSR + RSC)사용자가 페이지에 접속하면, Next.js는 서버에서 미리 HTML과 RSC 데이터를 만들어서 전송합니다.HTML: 눈에 보이는 구조와 디자인RSC ..

작업하다가 발생하는 "8080 같은 포트가 이미 사용중" 이라는 에러가 뜬다....면?간단하게 kill 함으로써 강제로 종료시킬 수 있다! 방법하다가 발생하는 "8080 같은 포트가 이미 사용중" 이라는 에러가 뜬다....면? 간단하게 kill 함으로써 강제로 종료시킬 수 있다! 실행 방법 1. 일단 윈도우키 + cmd 로 들어가기 netstat -ano | findstr 8080: 현재 8080 포트를 사용 중인 프로세스의 정보를 확인하는 명령어: 출력 결과의 마지막 열이 해당 포트를 점유 중인 프로세스의 PID taskkill /f /pid [PID]: 해당 PID의 프로세스를 강제 종료하는 명령어: /f 옵션은 강제 종료의 의미를 가짐. 이런 식으로 하시면 됩니다 ✅여러 PID 한 번에 종료하..

목차📝 문제🎯 알고리즘 핵심 단계✅ 실습 인증 파트_코드⚡ 트러블 슈팅https://www.acmicpc.net/problem/1297📝 문제김탑은 TV를 사러 인터넷 쇼핑몰에 들어갔다. 쇼핑을 하던 중에, TV의 크기는 그 TV의 대각선의 길이로 나타낸 다는 것을 알았다. 하지만, 김탑은 대각선의 길이가 같다고 해도, 실제 TV의 크기는 다를 수도 있다는 사실에 직접 TV를 보러 갈걸 왜 인터넷 쇼핑을 대각선의 길이만 보고 있는지 후회하고 있었다.인터넷 쇼핑몰 관리자에게 이메일을 보내서 실제 높이와 실제 너비를 보내달라고 했지만, 관리자는 실제 높이와 실제 너비를 보내지 않고 그것의 비율을 보내왔다.TV의 대각선 길이와, 높이 너비의 비율이 주어졌을 때, 실제 높이와 너비의 길이를 출력하는 프로그..

Q: git push -u origin main와 git push origin main의 차이A: 두 명령은 비슷하지만 살짝 다른 의미를 가진다.git push origin mainmain 브랜치를 원격(origin)에 푸시git push -u origin main푸시 + 이제부터 기본 브랜치로 등록 (업스트림 설정) 쉽게 말하면,git push -u origin main:- 처음 푸시할 때 추천- main 브랜치를 기본(추적 브랜치)으로 기억해두기 때문이다. ✨ 추천하는 상황처음 GitHub에 브랜치 푸시할 때git push -u origin main이미 한 번 업스트림 설정한 이후git push 또는 git push origin main 결론 : 처음 push할 때는 -u를 붙이는 걸 추천!Q: VS..

목차📝 문제🎯 알고리즘 핵심 단계✅ 실습 인증 파트_코드⚡ 트러블 슈팅🤔 이것도 한 번 생각해 봐요! (참고 자료) https://www.acmicpc.net/problem/1296 📝 문제연두는 프로그래밍 대회에 나갈 팀 이름을 정하려고 한다. 미신을 믿는 연두는 이환이에게 공식을 하나 받아왔고, 이 공식을 이용해 우승할 확률이 가장 높은 팀 이름을 찾으려고 한다.이환이가 만든 공식은 사용하려면 먼저 다음 4가지 변수의 값을 계산해야 한다.L = 연두의 이름과 팀 이름에서 등장하는 L의 개수O = 연두의 이름과 팀 이름에서 등장하는 O의 개수V = 연두의 이름과 팀 이름에서 등장하는 V의 개수E = 연두의 이름과 팀 이름에서 등장하는 E의 개수그다음, 위에서 구한 변수를 다음 식에 입력하면 팀 ..

목차📝 문제🎯 알고리즘 핵심 단계✅ 실습 인증 파트_코드⚡ 트러블 슈팅📝 문제https://school.programmers.co.kr/learn/courses/30/lessons/250125 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 🎯 알고리즘 💡 문제 이해 2차원 리스트 board는 색깔 정보를 담고 있음현재 좌표는 (h, w)→ 여기를 기준 칸이라고 하자!이 기준 칸의 상하좌우 네 칸 중에서같은 색인 칸이 몇 개인지 세는 문제 💡 문제 접근 기준 칸 색을 변수에 저장: start = board [h][w]방향벡터 설정:dx = [-1, 1, 0, 0] → 상하dy = [0, ..

목차📝 문제🎯 알고리즘 핵심 단계✅ 실습 인증 파트_코드⚡ 트러블 슈팅🤔 이것도 한 번 생각해 봐요! (참고 자료)📝 문제https://school.programmers.co.kr/learn/courses/30/lessons/42576 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 🎯 알고리즘 💡 문제 이해 마라톤에 참가한 사람들: participant 리스트완주한 사람들: completion 리스트단 한 명만 완주를 못한 상황참가자 중에서 완주하지 못한 사람의 이름을 찾아서 반환하는 문제단, 동명이인(이름이 같은 사람)도 있을 수 있다는 점! 주의!💡 문제 접근 방법 1: collecti..