각 화면의 기능을 공통 인터페이스로 분리

프로젝트 중 각 화면에 개별적으로 구현된 공통 기능들을 Footer와 같은 방식으로 항상 화면에 표시되도록 통합하고 디자인팀과 협력해 시각적인 디자인을 다듬어서 사용자 경험을 개선했으며 이를 통해 유지 보수성을 향상시켰습니다.

1) 배경

프로젝트에서 여러 화면에 공통된 기능이 있었으나 이를 개별적으로 구현한 방식은 사용자 편의성과 유지보수성에서 부족함이 있었습니다.

이 문제에 대해 회의를 통해 공통 기능을 하나의 인터페이스로 통합하고 사용자에게 언제든지 접근할 수 있는 형태로 구현하도록 하였으며 해당 작업을 담당하게 되었습니다.

2) 해결 방법 도출

먼저 네이버의 오른쪽 하단에 위치한 스크롤 버튼 및 설정 버튼에서 영감을 얻어 공통 기능을 한 곳에 모아 사용자 편의성을 높이고자 했습니다.

처음에는 버튼을 일렬로 배치했지만 기능이 많아지면 일렬 배치가 비효율적이라는 문제를 발견했습니다.

이를 해결하기 위해 Hover 이벤트를 추가해 숨겨진 상태에서 버튼이 나타나도록 했습니다.

그러나 단순히 일렬로 버튼을 나열하는 방식은 여전히 만족스럽지 않았습니다.

고민 끝에 버튼들을 부채꼴 형식으로 배열하는 아이디어를 제안했고 회의를 거쳐 3가지 방안 중 최종적으로 부채꼴 방식이 채택되었습니다.

3) 해결

부채꼴 형식을 구현하기 위해 삼각함수를 활용해 정확한 위치 계산을 하였고 차후 기능이 추가될 가능성을 염두에 두어 이를 함수로 분리해 유지보수성을 높였습니다.

덕분에 공통 기능이 수정되거나 추가될 경우 각 화면에서 개별적으로 수정하는 대신 한 번의 작업으로 모든 화면에서 변경이 반영되도록 개선되었습니다.

4) 부채꼴 형식 코드 예시

See the Pen Untitled by Dukbong (@dukbong) on CodePen.