여둘까 Office Layout 3
여둘까 Office Layout
바로가기 ↗
이 글은 여둘까 Office Layout 시리즈의 4번째 기록입니다. (총 10개)
오늘 한 일
- 평면도 입력
- PDF 평면도 업로드 지원, 여러 쪽이면 썸네일로 골라서 선택
- 이유: 보통 도면이 PNG보다는 DWG나 PDF인 경우가 많고, DWG를 열 수 있는 사람이라면 전용 프로그램을 사용할 테니 PDF만 추가하기로 함
- PDF 평면도 업로드 지원, 여러 쪽이면 썸네일로 골라서 선택
- 사용 안내 / 보정
- 이유: 사용자가 최대한 쉽게 사용할 수 있게 하기 위해서
- 방안
- 사용 설명서 — 빈 화면 빠른 안내 + 툴바 도움말 모달
- 축척 보정 튜토리얼 — 평면도를 처음(그리고 새로) 열 때마다 자동 안내
- 프로젝트 설정 모달(이름·암호·축척)로 정리
- 거리 재기 / 보정 UX
- 이유: 만든 툴을 파트장님한테 사용해보게 했을 때 내가 부가적으로 사용법을 알려줘야 했던 부분을 보완
- 방안:
- 거리 재기·보정 모드에서 십자(+) 커서
- 거리 재기 라이브 미리보기 — 시작점→커서 점선 + 실시간 거리 표시
- ‘시작 위치’ 안내 + 호버 삭제(✕) 버튼
- 스냅
- 이유: 여러 오브젝트를 나란히 배치할 수 있게 하기 위해서
- 방안
- 객체 스냅 — 근처 면·중심에 자석처럼 정렬(🧲 토글)
- 회전 좌표계 기반 면 스냅으로 보강 — 회전한 객체끼리 면이 정확히 flush
- 주석/도형 그리기 도구
- 이유: 부수적으로 설명을 덧붙이고 싶을 때 필요할 것으로 판단되었고 파트장님도 해당 기능에 대한 요청이 있었음.
- 방안
- 네모·원·화살표·텍스트 + 색상 그리기 도구 추가
- 주석 선택 불가 버그 수정(투명 채움·화살표 히트폭)
- 최근색 팔레트(스와치 10개) 추가, picker 아래 팝오버로 배치(툴바 폭 고정)
- 팔레트 사무실/주차장 그룹 분리 + 주차구역 프리셋
- 이유: 툴을 만들고나니까 주차장 관리하는 팀에서 주차장 신규 배치를 위해서 캐드 작업 요청함. 귀찮아서 니들이 알아서 하도록 주차장 프리셋 구현.
- 장애인주차 마커를 휠체어 SVG 벡터로 교체
- 이유: 처음에는 아이콘(♿)을 이용했는데 이질적이기도 했고, 통상적인 주차장의 휠체어 표시와 상이해서 변경함
- 방안: fontawesome의 free version 활용
- 툴바 / 구조
- 툴바 정리 — 📁 파일 드롭다운 메뉴 + 새로 만들기
- 클린코드 리팩터 — 드롭다운 헬퍼 통합, 색 상수화, 항목수 가구만 집계, FA 출처표기
막힌 부분
- 주석/도형 그리기 도구
- 텍스트 입력 후 화면이 마우스 따라 움직이던 버그 수정
- 텍스트 도구로 드래그 시
_skipClick이 남아 다음 클릭 먹던 버그 수정