UIUX3 [올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #10] 모바일 반응형 깨짐 현상과 슬라이더 터치 오류 해결기 안녕하세요! 방구석에서 시작한 작은 아이디어를 세상에 쏘아 올린 1인 개발자입니다.드디어 길고 길었던 [파이어족 은퇴 시뮬레이터] 메이킹 로그 시리즈의 마지막, 10편에 도착했습니다! 지난 9편에서 붉은색 배포 에러를 극복하고 무사히 전 세계에 제 웹사이트를 런칭했었죠. 제 넓은 27인치 PC 모니터에서 돌아가는 시뮬레이터의 모습은 그야말로 완벽 그 자체였습니다. "크, 역시 나는 천재야!"라며 자아도취에 빠져있던 것도 잠시, 침대에 누워 제 스마트폰(아이폰)으로 접속해 본 순간 저는 경악을 금치 못했습니다. 화면이... 화면이 완전 박살이 나 있었거든요! 오늘 마지막 편에서는 초보 프론트엔드 개발자들이 무조건 겪게 되는 관문, '모바일 반응형 깨짐 현상'과 '터치 오류'를 어떻게 극복했는지 그 눈물겨운.. 2026. 3. 17. [올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #06] J커브의 쾌감, Recharts(또는 Chart.js)로 자산 성장 그래프 그리기 안녕하세요! 방구석에서 노트북 하나로 자본주의 생존 무기를 만들어가고 있는 1인 개발자입니다.지난 5편에서는 물가상승률과 절세계좌(ISA)라는 현실적인 변수들을 스위치 하나로 통제하는 짜릿한 로직을 완성했었죠. 내부적으로는 수십 년 치의 완벽한 복리 데이터가 성공적으로 쌓이고 있었습니다. 하지만 숫자는 그저 숫자일 뿐입니다. 화면에 "은퇴까지 15년 남았습니다"라고 글씨만 띡 띄워주면 사람들의 가슴이 뛸까요? 절대 아닙니다. 파이어족을 꿈꾸는 사람들을 진짜 미치게 만드는 건, 시간이 지날수록 내 자산이 눈덩이처럼 불어나 결국 하늘로 솟구치는 거대한 '곡선'을 두 눈으로 직접 확인하는 순간입니다. 그래서 오늘 6편에서는 딱딱한 데이터 뭉치를 아름다운 곡선으로 탈바꿈시켜 준 데이터 시각화의 꽃, '차트 그리.. 2026. 3. 13. [올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #02] [UI/UX] 숫자에 생명력을 불어넣는 디자인: 슬라이더 UX와 컬러 심리학 안녕하세요! 방구석에서 코딩으로 자본주의 생존 도구를 빚어내고 있는 1인 개발자입니다.지난 1편에서는 제가 왜 기존의 답답한 엑셀 파일들을 버리고, 직접 '올인원 배당 파이어족 은퇴 시뮬레이터'를 만들게 되었는지 그 기획 배경을 말씀드렸죠. 목표 금액이 아니라 '은퇴 날짜'를 역산해서 보여준다는 아이디어까지 구상하고 나니, 이제 남은 건 이 멋진 기획을 사용자들의 눈앞에 어떻게 예쁘고 편하게 보여줄 것인가 하는 '디자인' 문제였습니다. 오늘은 프론트엔드 개발자로서 제가 UI/UX(사용자 환경 및 경험)를 설계할 때 어떤 고민을 했는지, 그리고 색깔 하나하나에 어떤 심리학적 의미를 담았는지에 대한 재미있는 디자인 썰을 풀어보려고 합니다. 숫자 타이핑은 최악의 경험이다: 슬라이더(Slider)의 도입여러분,.. 2026. 3. 9. 이전 1 다음
