CSS2 [AI] Claude와 함께 타임박싱 웹앱 만들기 #5 — 모바일 최적화: 터치와의 전쟁 손가락은 마우스가 아니더라지난 4편에서 오버레이형 UI 리디자인을 마치고 PC에서 "오, 이거 꽤 쓸만한데?"라며 뿌듯해했거든요. 뭐, 거기까진 좋았습니다. 문제는 그 다음이었어요.퇴근 후 소파에 누워서 핸드폰으로 접속해봤는데... 아, 이게 뭐지? PLAN 블록을 아무리 탭해도 DONE으로 안 바뀌고, 드래그하면 팝업이 실종되고, 드로어를 열면 닫을 수가 없고, Brain Dump에 글자를 입력하려면 커서가 안 뜨는 거예요. PC에서는 완벽했는데 손가락 하나 갖다 대니까 앱이 완전히 다른 물건이 되어버렸습니다.4자녀 아빠가 밤 11시에 소파에서 핸드폰 들고 "왜 안 돼..."를 중얼거리는 모습, 상상이 되시죠? 이번 편은 바로 그 "모바일 터치와의 전쟁" 기록입니다. 웹앱 개발할 때 모바일 대응이 얼마.. 2026. 3. 23. [AI] Claude와 함께 타임박싱 웹앱 만들기 #4 — 전면 리디자인: 오버레이형 통합 레이아웃 "처음부터 다시 짜면 어때요?"Claude가 이 말을 했을 때 잠깐 멈칫했습니다. 그런데 생각해보니… 맞는 말이었거든요.몇 주째 타임박싱 앱을 쓰면서 점점 불편함이 쌓여가고 있었습니다. 아이들 재워놓고 새벽에 홈랩 작업할 때 앱을 켜면, 작은 모바일 화면에서 15분짜리 셀을 손가락으로 정확히 눌러야 하는데 이게 생각보다 너무 어려웠거든요. 오른쪽 엄지로 PLAN 4칸, 왼쪽 엄지로 DONE 4칸을 번갈아 보면서 시선이 분산되는 것도 문제였고요. "이거, 원래부터 좀 이상했던 거 아닐까?" 싶었습니다.결국 이번 편에서는 레이아웃 자체를 전면 리디자인하기로 결정했습니다. 코드 리팩터링보다 훨씬 무거운 작업이지만, 어차피 쓸 앱이라면 제대로 만들어야죠.환경 정보항목내용앱 스택Vanilla JS + HTML +.. 2026. 3. 22. 이전 1 다음
