DBpia AI 플로팅 서비스 개발 – 퍼블리셔의 시선으로 본 SDK 제작기 누리미디어 테크블로그
DBpia AI 플로팅 서비스 개발 – 퍼블리셔의 시선으로 본 SDK 제작기
누리미디어 테크블로그
about 1
DBpia AI 플로팅 서비스 개발
– 퍼블리셔의 시선으로 본 SDK 제작기
about 1
안녕하세요. 저는 누리미디어에 합류하게 된 웹퍼블리셔입니다:)
저는 매일 사용자가 편리하게 서비스를 이용할 수 있도록 화면 구조를 설계합니다. 눈에 보이는 정적 디자인을 다양한 환경에서도 안정적으로 동작하도록 구현하고, 눈에 보이지 않는 접근성과 성능을 고려하여 UI를 완성하는 일을 하고 있습니다. 잘 짜여진 구조 위에 예쁘고 편리한 디자인을 구현하고, 동료들의 의도가 잘 녹아든 화면이 실제 사용자에게 긍정적인 경험으로 이어질 때 보람을 느낍니다.
제목없음
제목없음
제가 처음 맡게된 프로젝트는 ‘DBpia AI 플로팅 서비스’인데요. 각 대학교 도서관 서비스에서 DBpia AI를 손쉽게 붙이고 사용할 수 있게 하는 SDK 개발입니다. 도서관 이용자들은 별도의 설치나 로그인 절차 없이 AI 추천과 대화형 검색을 경험할 수 있고, 기관은 최소한의 설정만으로 새로운 기능을 제공할 수 있게 됩니다.
DBpia AI
제가 SDK 개발에 참여한 것은 이번이 두 번째입니다. 이전에는 간단한 ‘한 줄 뉴스’ 위젯 형태로, 정적인 데이터를 출력하는 단순 위젯 형태였습니다.
이번에 맡은 DBpia AI 플로팅 SDK는 단순한 정보 노출이 아니라 AI 기능이 탑재된 채팅 UI입니다.사용자가 SDK 안에서 대화를 이어가며 흐름이 끊기지 않고, 원활하게 경험, 탐색을 이어갈 수 있도록 설계해야 한다는 점이 가장 큰 차이였습니다.
SDK의 특징
SDK(Software Development Kit)는 말 그대로 “개발 키트”로 특정 기능을 한 줄 코드 삽입만으로 손쉽게 가져다 쓸 수 있도록 만들어줍니다.이를 통해 개발자는
중복 개발을 줄이고,
서비스 전반에 걸쳐 일관된 UI/UX를 유지하며,
버전 업데이트를 통해 자동으로 최신 기능을 반영할 수 있습니다.
제목없음
제목없음
퍼블리셔 관점에서 본 SDK 작업
1. 사용자 경험(UX)뿐만 아니라 개발자 경험(DX)도 고려하기
DX 측면에서는, SDK를 도입하는 개발자가 최소한의 코드 수정만으로 쉽게 적용할 수 있어야 합니다.이를 위해 마크업을 단순 HTML 파일로 분리하지 않고, JavaScript 안에서 마크업과 기능을 함께 관리하도록 개발했습니다.이 방식은 파일 구조를 단순화해 SDK를 적용하는 쪽에서 별도의 리소스나 템플릿을 신경 쓰지 않아도 된다는 장점이 있습니다.
또한 연동 가이드 문서를 제작해, 옵션 사용법과 적용 예제를 명확히 정리했습니다. 덕분에 외부 개발자는 SDK를 불러온 뒤 필요한 옵션만 설정하면, UI와 기능이 자동으로 붙고 바로 서비스에 반영될 수 있도록 했습니다.
개발 연동 가이드 - 메인
개발 연동 가이드 - 옵션 및 예시
제목없음
제목없음
2. 반응형 레이아웃 설계
모바일, 태블릿, PC 등 다양한 해상도에서 깨지지 않는 구조를 잡아야 합니다. 하지만 SDK 내부는 DBpia AI를 iframe으로 불러오는 방식을 사용하기 때문에, iframe 자체는 반응형을 지원하지 않는다는 제약이 있습니다. 😂
부모 컨테이너에서 크기를 제어
iframe 자체가 아니라, 감싸는 컨테이너에 비율 기반 레이아웃을 설정해 화면 크기에 따라 유연하게 변할 수 있도록 했습니다.
디바이스별 UI 차별화
PC와 11인치 이상 태블릿(일부 태블릿은 가로 모드만)에서는 플로팅 형태의 UI로 보여주고
iPad Mini와 모바일 환경에서는 모바일에 최적화된 UI를 별도로 제공했습니다.
이 과정에서는 User-Agent를 활용해 디바이스를 판별하고, 사용자 환경에 맞는 UI를 노출하도록 했습니다.
접속 기기에 따른 화면
뷰포트 단위 보완
iOS Safari에서는 스크롤 시 주소창이 접혔다 펼쳐지면서 100vh가 계속 변해 상단 UI가 잘리거나 하단 고정영역에 빈 공간이 생기는 현상이 발생합니다. → TIP: dvh(Dynamic Viewport Height)를 쓰면 바로 해결할 수 있습니다! 👍
제목없음
제목없음
3. 외부 페이지와의 충돌 방지
SDK는 다양한 기관 사이트에 삽입되기 때문에, 기존 스타일이나 스크립트와 겹치지 않도록 네임스페이스 관리, z-index 처리, 스크롤 락 제어 등을 꼼꼼히 챙겨야 합니다.
CSS 네임스페이스 및 스택 컨텍스트(z-index)
최상단에 고유 아이디를 선언, 모든 선택자들에는 접두어를 붙여 외부 CSS와 겹치지 않도록 했습니다.
isolation: isolate로 독립 스택 컨텍스트를 만들어 자체적으로 최상위 우선순위를 확보.
스크롤 락 제어
사용자가 내부 콘텐츠를 스크롤 시, 외부 문서 스크롤을 방지 적용, 닫은 후에는 복원
제목없음
제목없음
4. 상태별 UI & 편의성 제공
비로그인 화면
로딩 화면
연동 가이드 내 옵션 변경 후 체험(미리보기)
도서관 로그인 유무에 따른 UI
제목없음
제목없음
5. 접근성 구현(A11y)
role="dialog" + aria-modal="true"
→ 플로팅 버튼으로 레이어를 열면 스크린리더가 외부 문서를 무시하고 이 영역에 집중
aria-label, aria-expanded, aria-controls
→ 시각적으로는 아이콘만 있어도 의미가 전달되도록 보완
role="tooltip", aria-describedby
→ 스크린리더가 요소의 내용까지 모두 읽도록 구현
제목없음
제목없음
단순한 UI 구현은 상대적으로 난이도가 낮은 작업이지만, 이번 프로젝트에서는 위에 정리한 항목들뿐만아니라 기관별 로그인 인증 프로세스, 캐시 관리, 버전 관리 등 다양한 요소를 고려하여 작업했습니다. 이 과정을 통해 퍼블리셔로서 서비스 품질 전반을 고민하는 역량을 쌓을 수 있었습니다.
현재도 DBpia AI 플로팅 서비스는 지속적으로 문의와 피드백을 받고 있으며, 이를 빠르게 반영해 업데이트를 이어가고 있습니다.
앞으로는 더 안정적이고 편리한 기능을 제공하기 위해 꾸준히 고도화할 계획입니다.
DBpia AI 플로팅 서비스를 만나게 된다면 꼭 사용해 보세요!이런 밀도 있고 다양한 경험을 함께 만들어갈 동료를 기다리고 있습니다:D
