#UX
34개의 게시물
모바일 UX/UI 심화 최적화: GPU 가속과 접근성 강화
🤖 2335 in / 1232 out / 3567 total tokens 모바일 경험을 개선했다. GPU 가속으로 애니메이션을 부드럽게, 접근성으로 더 많은 사용자에게. GPU 가속을 전면 적용했다. will-change, translate3d 조합으로 레이어를 분리했다. 바텀시트, 스와이프 카드, 검색 오버레이에 gpu-accelerate 클래스를
블로그 관리 편의성 개선 - 날짜 포맷, 글 링크, Admin 버튼
🤖 1171 in / 672 out / 1843 total tokens 글 상세 페이지의 날짜 표시를 2026.03.13 15:28 형식으로 변경했다. 기존엔 toLocaleDateString으로 처리했는데, 시간까지 표시하려니 깔끔하지 않아 직접 포맷팅했다. 어드민 글 관리 페이지에서 제목을 클릭하면 해당 글로 이동하도록 했다. 새 탭으로 열리게
튜토리얼 3단계에 가짜 데이터 표시
🤖 422 in / 722 out / 1144 total tokens 온보딩 튜토리얼 3단계에서 빈 캘린더 대신 가짜 데이터를 보여주도록 했다. 사용자가 처음 앱을 켰을 때 빈 화면보다는 "이렇게 쓰는 거야"를 보여주는 게 낫다. tutorialFakeKeys 배열을 만들고 svelte/store의 get 함수를 추가했다. 이걸로 캘린더에 미리 채워
모바일 확대 완전 차단하기
🤖 609 in / 756 out / 1365 total tokens 공무원 근무기록 앱에서 모바일 확대를 완전히 차단했다. 사용자가 실수로 화면을 확대해서 UI가 깨지는 걸 방지하기 위해서다. CSS만으로는 한계가 있었다. touch-action: manipulation은 더블탭 줌은 막지만, 핀치 줌까지는 막지 못한다. 그래서 touch-acti
모바일 버튼 연타 시 화면 확대 방지
🤖 726 in / 1263 out / 1989 total tokens touch-action: manipulation 전역 스타일 적용으로 iOS Safari 등에서 더블탭 줌을 비활성화한다. 스크롤 기능은 유지하면서 버튼 클릭 반응 속도만 개선하여 UX를 개선했다. 웹뷰 환경에서 발생하는 확대 현상을 CSS로 깔끔하게 해결했다.
UX 다듬기: 커스텀 다이얼로그, 스플래시, 시간 한글화
🤖 3668 in / 918 out / 4586 total tokens 이번 커밋은 사용자 경험을 다듬는 데 집중했다. 시스템 alert/confirm을 앱 톤앤매너에 맞는 커스텀 다이얼로그로 교체했고, 미래 퇴근시간 저장을 차단하는 유효성 검사도 추가했다. 스플래시 화면을 새로 만들었다. 앱 진입과 로그인 성공 시 로고가 표시되는 로딩 화면이 나타
[UX 개선] 모바일 캘린더 상세 뷰 바텀시트 전환
🤖 1439 in / 1403 out / 2842 total tokens 모바일 화면에서 캘린더 그리드가 높아 상세 영역이 가려지던 문제를 해결했다. 인라인 상세 뷰를 바텀시트 오버레이 방식으로 변경하여 스크롤 문제를 잡고 사용자 경험을 개선했다. DaySheet 컴포넌트를 리라이트하고 CSS 스타일을 재구성했다.
퀵 액션을 바텀시트로 개편하고 식사 금액 입력 팝업 추가
🤖 1164 in / 643 out / 1807 total tokens 기존 인라인 퀵 액션 버튼들을 별도 바텀시트로 분리했다. 오늘 날짜 선택 시 자동으로 슬라이드업되며, 오버레이 클릭이나 닫기 버튼으로 닫을 수 있다. 식사 버튼은 이제 금액 입력 팝업을 띄운다. 기본값이 자동 입력되지만 수정 가능하도록 했다. CSS는 fixed 포지션 오버레이에
설정 UX 개선: 테마 실시간 프리뷰와 뒤로가기 처리
🤖 1044 in / 863 out / 1907 total tokens 설정 화면에서 테마를 변경할 때 바로 미리볼 수 있게 했다. 기존엔 저장해야 적용돼서 어떤 색상인지 확인하기 번거로웠는데, 이제 클릭 즉시 화면에 반영되고 실제 저장은 저장 버튼으로 한다. themePreview 스토어를 새로 만들고 레이아웃에서 기존 설정과 프리뷰 값을 병합해서
Gongnog 초기 배포 완료, 캘린더 터치 피드백 강화
🤖 952 in / 812 out / 1764 total tokens 공무원 근무기록 웹앱 Gongnog를 첫 배포했다. SvelteKit과 PostgreSQL을 기반으로 회원가입, 로그인, 근무기록 CRUD, 통계, 설정까지 핵심 기능을 모두 구현했다. GitHub와 Railway를 연동해 배포 파이프라인도 확보했다. 캘린더 UX를 개선했다. 날짜
Gongnog 초기 배포 및 캘린더 UX 개선
🤖 952 in / 1547 out / 2499 total tokens SvelteKit과 PostgreSQL를 활용한 공무원 근무기록 앱을 최초로 서비스에 반영했습니다. 캘린더 UI를 개선하여 날짜 선택 시 팝 애니메이션과 배경 하이라이트를 적용했습니다. 인증, 기록 CRUD, 통계 기능까지 모두 구현하여 서비스 운영을 시작합니다.
경마 튜토리얼 v3 — Shadow DOM으로 CSS 격리 + 11단계 확장
🤖 1603 in / 653 out / 2256 total tokens 튜토리얼 툴팁이 페이지 CSS에 오염되던 문제를 Shadow DOM으로 근본 해결했다. 기존엔 horse-race.css의 button { width: 100% } 같은 글로벌 스타일이 튜토리얼 버튼까지 침범했는데, 이제 Shadow DOM 내부에 완전히 격리된 스타일을 주입한다.
MidWayDer v0.42.0: PWA 설치 배너 추가
🤖 1224 in / 742 out / 1966 total tokens PWA 설치 기능을 지원하는 InstallBanner 컴포넌트를 새로 만들었다. beforeinstallprompt 이벤트를 감지해서 사용자에게 앱 설치를 유도하는 배너를 띄운다. 배너는 3초 지연 후 표시되며, 설치하거나 거부하면 자동으로 사라진다. 거부 선택은 localStor
PWA 설치 기능 구현 및 v0.42.0 캐시 업데이트
🤖 1224 in / 1675 out / 2899 total tokens InstallBanner 컴포넌트를 통해 PWA 설치 유도 기능을 구현합니다. beforeinstallprompt 이벤트를 핸들링하여 설치 팝업을 제공하고, 사용자 거부 상태를 localStorage에 저장해 중복 표시를 방지합니다. 또한 설치 완료 이벤트(appinstalled
접근성과 UX, 디테일을 챙기다
🤖 1050 in / 701 out / 1751 total tokens v0.40.0은 사용자 경험의 디테일을 챙긴 업데이트다. 접근성 측면에서 ResultList에 aria-busy 속성을 추가해 로딩 상태를 스크린리더에 알리고, 에러 메시지에는 role="alert"와 aria-live="polite"를 적용했다. 키보드 포커스 표시기도 개선했다.
v0.40.0 릴리스, 접근성(A11y)과 UX를 동시에 개선했다.
🤖 1050 in / 1700 out / 2750 total tokens 접근성 부분에서는 ResultList의 로딩 상태를 aria-busy으로 표현하고, 에러 메시지는 role='alert'과 aria-live로 사용자에게 즉시 전달한다. 키보드 포커스 표시기도 3px의 굵은 선과 오프셋을 적용해 눈에 잘 띄도록 개선했다. UX 측면에서는 모바일의
검색 로딩 UX 개선, 단계별 메시지와 shimmer 효과 적용 (v0.36.0)
🤖 1415 in / 1521 out / 2936 total tokens Zustand 스토어에 검색 단계를 추적하는 searchPhase 상태를 추가했다. 실제 결과 카드를 모방한 ResultCardSkeleton에 shimmer 애니메이션을 넣어 시각적 품질을 높였다. 사용자가 기다리는 동안 경로 분석, 주변 매장 검색, 최적 경유지 계산 등의 단
검색 로딩 UX 개선 - 단계별 메시지와 shimmer 스켈레톤
🤖 1415 in / 836 out / 2251 total tokens v0.36.0에서 검색 경험을 개선했다. 사용자가 검색할 때 무작정 기다리게 하지 않고, 지금 무슨 일이 일어나는지 알려주는 방식이다. 검색 단계를 세 분류로 나눴다. '경로 분석 중', '주변 매장 검색 중', '최적 경유지 계산 중'. 시간이 지날수록 다음 단계 메시지를 보여
사용자 피드백 시스템 도입으로 데이터 기반 개발 준비 완료
🤖 1462 in / 650 out / 2112 total tokens v0.26.0에서 사용자 피드백 수집 시스템을 구현했다. PLAN.md의 1순위 항목이다. Prisma로 Feedback 모델을 만들었다. 평점(1-5), 카테고리(bug/suggestion/praise), 코멘트, 메타데이터를 저장한다. GET/POST를 지원하는 API 라우트
모바일 UX 개선과 네트워크 상태 감지 기능 추가
🤖 1631 in / 836 out / 2467 total tokens v0.23.0에서 모바일 경험을 크게 개선했다. 버튼 크기를 w-12/h-12에서 w-14/h-14로 키우고, BottomSheet 드래그 핸들과 드래그 영역도 확대했다. FAB는 하단 여백 24px을 확보해 손가락이 닿기 더 편해졌다. 로딩 상태도 개선했다. ResultList
자유 경유지 검색과 단일 선택 UX 개선 (v0.20.0)
🤖 1552 in / 815 out / 2367 total tokens 경유지 검색이 훨씬 자유로워졌다. 이제 '홍대입구역', '이태원 맛집', '다이소' 같은 키워드로 원하는 장소를 찾을 수 있다. Naver Local Search API를 통합하면서 검색 타입을 자동으로 감지한다. 카테고리 검색인지 키워드 검색인지 구분해서 처리한다. 검색창 pl
자유 경유지 키워드 검색 및 단일 선택 UX 업데이트 (v0.20.0)
🤖 1552 in / 1764 out / 3316 total tokens Naver Local Search API를 통합해 '홍대입구역', '이태원 맛집' 등 키워드로 자유 경유지를 검색할 수 있게 했습니다. 검색 타입을 자동 감지하고, 첫 선택 후 나머지 체크박스를 비활성화하는 단일 선택 UX를 적용했습니다. 사용자가 다중 선택 모드로 진입할 수 있
단일 선택 UX 개선 및 접근성 강화로 버전 0.19.0 출시
🤖 1721 in / 1954 out / 3675 total tokens MultiStopSelector의 기본 동작을 단일 선택 모드로 변경했습니다. 첫 번째 경유지 선택 시 나머지 체크박스를 자동 비활성화하고, '다른 경유지 추가하기' 버튼을 통해 다중 선택 모드로 진입할 수 있게 구현했습니다. 또한 지도 컨테이너, 카테고리 선택, 결과 카드에 A
v0.17.0 릴리스: 자유 경유지 검색 및 단일 선택 UX 검증 완료
🤖 739 in / 1502 out / 2241 total tokens 자유 경유지 검색 및 단일 선택 UX 검증을 완료하고 v0.17.0을 릴리스한다. /api/search의 query 파라미터와 searchType 자동 감지가 정상 작동함을 확인했고, 검색창 placeholder를 사용자 친화적으로 수정했다. 시간대별 스마트 제안 칩과 단일 선택
v0.17.0 - 자유 경유지 검색과 단일 선택 UX 검증 완료
🤖 739 in / 709 out / 1448 total tokens 자유 경유지 검색 기능과 단일 선택 UX를 최종 검증했다. 660개 테스트가 8.82초 만에 전부 통과했다. /api/search 엔드포인트에서 query 파라미터와 searchType을 자동으로 감지하도록 로직을 검증했다. 검색창 placeholder는 '어디를 들를까? (예:
MidWayDer v0.16.0: 자유 경유지 검색과 단일 선택 UX
🤖 2170 in / 811 out / 2981 total tokens 자유 경유지 검색 기능이 완성됐다. MVP 단계가 끝났다. 검색창이 바뀌었다. "어디를 들를까?"라는 친근한 placeholder와 함께 홍대입구역, 다이소, 스타벅스 같은 예시를 보여준다. 이제 카테고리뿐 아니라 자유롭게 검색어를 입력할 수 있다. 백엔드는 이미 v0.15.0에
검색창 표시 조건 완화로 BottomQuickBar 유연성 확보
🤖 413 in / 1498 out / 1911 total tokens 즐겨찾기나 최근 검색 기록이 있어도 BottomQuickBar가 사라지지 않도록 렌더링 조건을 완화했습니다. 검색창을 언제든지 바로 접근할 수 있게 UX를 개선했습니다. 불필요한 조건문을 제거하여 코드도 더 간결해졌습니다.
검색창에 파란색 테두리 적용으로 UX 개선
🤖 386 in / 448 out / 834 total tokens 하단 퀵바의 검색 버튼 스타일을 조정했다. 기존 회색 테두리는 배경과 너무 비슷해서 검색 기능인지 인지하기 어려웠다. 파란색 테두리로 변경하니 클릭 가능한 영역이라는 게 훨씬 명확해졌다. 배경도 연한 회색에서 흰색으로 바꿔 대비를 높였다. tsx style={{ backgroun
검색창 테두리 색상 변경으로 UX 개선
🤖 386 in / 1705 out / 2091 total tokens 검색창 테두리 색상 변경으로 UX 개선 BottomQuickBar 컴포넌트에서 검색창의 테두리 색상을 회색에서 파란색으로 변경하여 명확성을 높였다. 배경색도 회색 대신 흰색으로 바꿔 깔끔한 디자인을 적용했다. 사용자가 검색창을 인지하기 쉬워지도록 시각적 강조를 실시했다. tsx
검색창을 button으로 변경하여 UX 개선
🤖 389 in / 612 out / 1001 total tokens 검색창을 input에서 button으로 교체했다. 기존엔 input을 클릭하면 검색 오버레이가 열리는 구조였다. 문제는 실제로 텍스트를 입력할 수 없는데 input처럼 보인다는 점. 사용자가 커서가 깜빡이는 걸 보고 입력을 시도하다 혼란을 겪을 수 있다. 그래서 아예 button으
검색창 버튼 요소 변경으로 UX 개선
🤖 389 in / 1723 out / 2112 total tokens 검색창을 버튼 요소로 변경하여 UX를 개선했다. 기존의 텍스트 입력 필드(input)를 버튼(button) 태그로 교체하여 클릭 영역을 명확히 했다. 사용자가 검색과 입력을 혼동하는 것을 방지하고 직관적인 인터페이스를 구현했다. 버튼 스타일 적용으로 디자인의 일관성도 확보했다.
검색창 readOnly 제거 및 입력 기능 보완
🤖 381 in / 1366 out / 1747 total tokens 검색창의 읽기 전용 속성을 제거하여 사용자가 직접 텍스트를 입력할 수 있도록 수정했습니다. 클릭 시 키보드가 정상적으로 뜨도록 처리하고, 우측 여백을 조정하여 아이콘과 텍스트 간 간격을 개선했습니다. 이제 원하는 장소를 직접 검색할 수 있는 UX를 구현했습니다.
자유 경유지 검색과 단일 선택 UX 기반 다졌다
🤖 1079 in / 651 out / 1730 total tokens 자유 경유지 검색 기능의 토대를 마련했다. Phase 1, 2를 완료하고 Phase 3의 상태 관리까지 추가했다. API 레이어에서 searchType을 calculateDetourCosts 함수로 전달하도록 수정했다. 카테고리 검색과 키워드 검색의 자동 전환을 지원하기 위함이다
v0.8.0: UI/UX 대폭 개선, 이제 에러도 친절하게
🤖 1539 in / 1118 out / 2657 total tokens MidWayDer v0.8.0을 릴리스했다. 사용자 경험 전반을 손봤고, 특히 에러 처리와 로딩 상태에서 체감 품질이 크게 올랐다. 검색 결과 카드에서 button 중첩으로 인한 hydration 에러를 해결했다. div에 role='button'과 tabIndex를 줘서 접근