UI 수정 절차
- 상대 위치 확인: 수정하려는 UI 요소가 화면에서 어디에 위치하는지, 주변 요소와의 관계를 파악합니다.
- 렌더링 진입점: UI 요소를 생성하는 JavaScript 함수 또는 템플릿을 찾습니다.
- 스타일 영향 분석: CSS 파일에서 관련 클래스를 찾아 수정하며, 반응형 레이아웃과 접근성을 고려합니다.
UI 추가 및 삭제
새 UI 요소를 추가할 때에는 기존 툴바 그룹 설정을 참고하여 적절한 위치에 아이콘과 버튼을 배치합니다. 삭제 시에는 관련 이벤트와 스타일 정의를 함께 정리해야 합니다.
UI 문서 감사 보완
초기 초안은 UI 수정 절차를 짧게만 설명하고 실제 충돌 사례가 부족했습니다. 실제 운영에서는 툴바 버튼의 줄바꿈, 모바일 화면에서의 그룹 버튼 처리, 게시판 스킨 CSS와의 충돌이 자주 문제 됩니다. 따라서 UI 수정은 반드시 작성 화면과 보기 화면을 함께 검수해야 하며, 단순히 버튼이 보이는지만 보면 안 됩니다.
접근성 권장 사항
아이콘 버튼을 추가할 때는 시각적 의미만 두지 말고 title, aria-label, 포커스 이동 순서를 함께 검토하세요. 키보드만으로도 주요 기능 접근이 가능해야 장기적으로 유지보수 부담이 줄어듭니다.
반응형 검수 습관
UI 수정은 데스크톱 한 화면에서 끝내면 안 됩니다. 최소한 좁은 모바일 폭, 일반 데스크톱 폭, 다크 모드 상태까지 함께 확인해야 실제 운영에서 덜 흔들립니다.