Alert, Confirm UI를 편하게 다루기 위한 고민과 해결법
안녕하세요, 원티드랩 프론트엔드 개발자 강근우입니다.
원티드 프론트엔드팀에서 Alert와 Confirm UI를 편하게 다루기 위해 했던 고민과 이에 대한 해결법을 공유합니다.
사용하기 쉬운 인터페이스의 중요성
원티드 프론트엔드 팀에서는 개발 생산성을 위해 자주 사용되는 기능과 UI를 추상화 해서 재사용 가능하게 만들기 위해 노력합니다.
하지만 여러 컴포넌트와 훅들을 재사용 가능하게 만들어도, 사용하기 어렵다면
이걸 쓸 바에는 새로 만들지…
라는 생각이 들고, 열심히 공통화 시켜놓은 기능을 사용하지 않고 직접 기능을 만들어 사용하게 됩니다. 시간이 흐르면 열심히 만든 코드는 결국 자연스럽게 버려지게 됩니다. 이런 일이 벌어지지 않기 위해서는 사용하기 쉽게 인터페이스를 열어주어야 합니다.
사용하기 쉬운 인터페이스란?
그렇다면 사용하기 쉬운 인터페이스는 무엇일까요? 정답이 없는 문제입니다. 사람마다 생각이 다를 겁니다. 다만 모두가 동의할 수 있는 사실은 사용하기 어렵지 않은 인터페이스는 사용하기 쉬운 인터페이스일 가능성이 크다는 것입니다.
경험적으로 느낀 사용하기 어려운 인터페이스는 아래와 같은 특징을 가지고 있었습니다.
- 이 인터페이스가 어떤 역할을 하는지 직관적으로 알기 어려워, 코드 내부를 봐야 해 사용할 때 시간이 많이 드는 인터페이스
- 기능 확장에 열려 있지 않아 조금만 상황이 바뀌어도 재활용하기 힘든 인터페이스
사용하기 쉬운 인터페이스의 예시, 자바스크립트 기본 인터페이스
경험상 사용하기 편한 인터페이스는 자바스크립트 기본 문법과 유사한 인터페이스입니다. 이유는 아래와 같습니다.
- 모두가 자바스크립트 기본 문법의 인터페이스를 알고 있으므로, 이와 유사하게 인터페이스를 뚫어놓는다면 어떻게 동작하겠다는 예측이 가능해져 굳이 코드 내부를 볼 필요가 없기 때문입니다.
- 자바스크립트 기본 문법의 인터페이스는 오랜 세월에 걸쳐 개선된 인터페이스이기 때문에, 기능 확장에 열려있는 인터페이스일 가능성이 크기 때문입니다.
이런 이유로 원티드랩 프론트엔드팀은 최대한 자바스크립트 기본 API와 유사한 인터페이스를 열어주기 위해 노력합니다.
자바스크립트 기본 Confirm, Alert의 사용 방법
자바스크립트에서 confirm은 아래와 같이 사용합니다.
자바스크립트에서 Alert는 아래와 같이 사용합니다.
자바스크립트 기본 Alert, Confirm의 한계
하지만 기본 API는 프로젝트에 맞게 디자인 커스텀을 할 수 없습니다. 프로덕트에서는 사용자 경험을 고려해 Alert, Confirm UI를 직접 만들어 사용하게 됩니다.
디자인은 커스텀하고 싶지만 사용성을 포기하기 싫어
이러한 커스텀 Confirm UI와 Alert UI의 직관적인 사용을 위해 자바스크립트 기본 API와 유사하게 인터페이스를 열어주고 싶었습니다.
아래와 같은 인터페이스를 목표로 개발을 시작했습니다.
프로젝트 기존 코드
목표한 인터페이스로 개발하기 위해 기존 프로젝트를 코드를 확인해 보았습니다. Confirm 컴포넌트 UI는 이미 만들어져 있었습니다. Confirm 컴포넌트는 전역 스토어와 연결되어 있어 스토어의 상태에 따라 Confirm의 내용물과 보여짐 여부가 결정되는 구조였습니다.
어떻게 해야 원하는 인터페이스가 동작하게 할 수 있을까?
위 코드가 의도한 대로 동작하기 위해서는
Confirm UI에서 확인 버튼을 눌렀을 때 isConfirmed에 true를 할당하고, 취소 버튼을 눌렀을 때 isConfirmed에 false를 할당
해야 합니다. 어떻게 구현할 수 있을지 여러 방법을 고민했고, 결국
Event Emitter + Promise
를 사용하는 방법을 선택하게 되었습니다.
Event Emitter 란?
Event Emitter 모듈은 특정 이벤트에 리스너 함수를 달아서, 이벤트가 발생했을 때 이를 캐치할 수 있도록 하는 Node JS 기본 모듈입니다.
하지만, Event Emitter는 NodeJS API이므로 브라우저에서 사용할 수 없습니다. 이에 직접 구현해 사용하였습니다.
이를 이용해 아래와 같은 방식을 설계하였습니다.
- Confirm이 열릴 때, 이벤트 수신 대기하도록 만듭니다.
- 확인 버튼을 클릭하면 true 데이터와 함께 이벤트를 발생시키고, 취소 버튼을 클릭하면 emit 메서드를 통해 false 데이터와 함께 이벤트를 발생시킵니다.
- 이벤트가 수신되면, 그 결과를 Promise Resolve 합니다.
이를 코드로 풀어내면, 아래와 같습니다.
open 함수를 실행하면, 이벤트 수신 대기하도록 만들고 Confirm 컴포넌트를 열어줍니다.
확인 버튼을 클릭하면 eventEmitter에서 true 데이터와 함께 이벤트를 발생시키고, 취소 버튼을 클릭하면 eventEmitter에서 false 데이터와 함께 이벤트를 발생시킵니다.
이벤트가 발생하면 open 함수에서 수신 대기중인 이벤트 리스너에 걸리게 되고, 콜백이 실행됩니다. 콜백에서 수신한 데이터를 Promise Resolve 해줍니다.
이와 유사한 방법으로 Alert도 만들어 사용하고 있습니다.
현재 상태 점검하기
위의 작업으로 자바스크립트 인터페이스와 유사해 직관적이고 사용하기 편한 코드가 완성되었습니다.
하지만 현재 인터페이스에는 아직 풀어야 할 숙제가 남아있습니다. 현재 인터페이스는 위에 언급한 사용하기 힘든 인터페이스의 두번째 특징,
기능 확장에 열려 있지 않아 조금만 상황이 바뀌어도 재활용하기 힘듦
을 가지고 있습니다.
만약 Confirm UI의 버튼 텍스트가 “확인”이 아닌, “동의하기”로 바뀌어야 하는 상황이 발생한다면 열심히 만들어 놓은 위의 코드를 사용할 수 없습니다.
재활용 하지 못하는 상황이 반복적으로 발생하게 된다면, 열심히 공통화 해놓은 위의 코드는 사용되지 않을 것이고, 자연스럽게 사용되지 않아 버려지게 될 것입니다.
확장에도 용이하게
확장에 용이한 기능을 만들기 위해, useConfirm과 useAlert 훅에서 반환하는 open 함수의 두번째 파라미터에 Alert와 Confirm의 디자인을 오버라이딩 할 수 있는 옵션을 넣을 수 있게 만들었습니다.
버튼의 텍스트를 변경하는 기능을 가장 많이 사용할 것 같아 confirmTxt와 cancelTxt 프로퍼티로 버튼 텍스트를 수정할 수 있게 인터페이스를 열어주었습니다.
버튼 자체의 디자인이 변경되거나, Confirm UI 자체의 디자인이 변경되야하는 상황이 발생한다면, 추가로 프로퍼티를 열어주어 디자인 오버라이딩을 허용할 수 있게 만들 계획입니다.
결론
이러한 방법으로 자바스크립트 기본 API와 비슷한 수준의 편하고 직관적인 사용성을 가질 뿐만 아니라, 기능 확장에 용이한 코드를 만들어 낼 수 있었습니다.
사용성이 좋고 확장에 용이한 코드는 단순히 보기 편하고 기능을 추가하기 쉬울 뿐 아니라, 유지 보수에 용이하고 개발 생산성이 올라가 더 빠르게 사용자의 의견을 반영할 수 있게 되어 비지니스에도 큰 도움이 된다고 확신합니다.
좋은 코드를 만들기 위해 항상 노력해주시고 피드백 주시는 팀원분들께 감사드리면서 글 마칩니다.
원티드에서는 다양한 직군에서 적극적으로 채용중입니다! 서버, 웹, 앱, 디자인 등 제품을 만들어가는 각자의 분야에서 전문적인 분들과 함께 일하기를 기대하고 있습니다. 회사 채용 정보 페이지를 확인해 주세요!
