배경

개발 당시에는 기존의 우편번호 검색 라이브러리들은 주로 완성된 컴포넌트 형태로 제공되어, 프로젝트의 기존 UI 시스템에 자연스럽게 녹여내거나 디자인을 커스터마이징하는 데 한계가 있었습니다.
디자인 위화감 없이 기존 UI 구조를 유지하면서 주소 검색 기능만 깔끔하게 주입할 수 있는 비제어 방식의 Hook이 필요하여 제작하게 되었습니다.
그때 당시에는 아직 React Hooks가 널리 보급되지 않은 시기였고, Headerless UI 컴포넌트 라이브러리도 많지 않아, 직접 필요한 기능을 구현하여 오픈소스로 배포하는 것이 의미 있다고 판단했습니다.
지금 와서보면 많이 미흡하지만 이 패키지가 최초로 오픈소스 활동에 도전하는 계기가 되었습니다.

해결한 문제

• UI 종속성 해결: 자체적인 모달이나 버튼 컴포넌트를 강제하지 않고, 개발자가 만든 기존 버튼이나 입력창에 open 함수를 바인딩하는 것만으로 기능을 구현할 수 있도록 설계했습니다.
• 다양한 모드 지원: 팝업(Popup) 방식과 특정 DOM 요소 내에 삽입되는 임베드(Embed) 방식을 모두 지원하여 프로젝트 요구사항에 맞춰 유연하게 대응할 수 있습니다.
• 오픈소스 기여: 간단하지만 실무에서 반드시 필요한 기능을 패키지화하여 배포함으로써, 비슷한 고민을 하는 개발자들에게 가벼운 대안을 제시했습니다.

기술적 선택 근거

• React Hooks: 컴포넌트의 생명주기에 맞춰 외부 스크립트(Daum Postcode)를 안전하게 로드하고, 검색 결과를 상태로 관리하기 위한 가장 현대적인 방식이라 판단했습니다.
• Lightweight Package: 번들 사이즈를 최소화하기 위해 외부 의존성을 배제하고 순수 자바스크립트 로직과 최소한의 리액트 API만을 사용하여 구현했습니다.
• TypeScript Support: 라이브러리 사용자가 주소 데이터의 구조(zonecode, address 등)를 정확히 파악하고 사용할 수 있도록 타입 정의 파일(.d.ts)을 함께 제공합니다.