KT DS에서 진행한 ELIFUN 교육 플랫폼 신규 개발 프로젝트에서, 네이티브 앱에 포함되는 WebView 화면과 백엔드 API 개발을 담당했습니다. 이 프로젝트의 핵심 과제는 **‘네이티브 앱의 일부처럼 느껴지는, 매끄럽고 안정적인 웹 경험’**을 만드는 것이었습니다.
WebView, 그 경계에서의 고민
WebView 개발은 단순한 웹 페이지 제작과는 다른 차원의 고민이 필요했습니다. 네이티브 앱이라는 부모 환경과의 상호작용, 제한된 리소스, 그리고 사용자의 기대치가 모두 얽혀있는 복잡한 문제였습니다.
1. 네이티브와 웹, 불안정한 통신을 해결하기
가장 큰 난관은 네이티브 앱과 WebView 간의 통신이었습니다. postMessage를 이용한 단순한 통신은 메시지 유실의 위험이 있었고, 콜백 기반의 비동기 로직이 코드 전반에 흩어져 복잡성을 높였습니다.
이를 해결하기 위해 메시지 송수신 인터페이스 정의하고, 이를 기반으로 동작하는 Custom Hook을 개발했습니다. 이 훅은 네이티브와의 통신 과정을 완전히 추상화하여, 개발자들이 마치 서버 API를 호출하듯 선언적으로 사용할 수 있게 했습니다. 덕분에 통신의 안정성을 확보했을 뿐만 아니라, 코드의 가독성과 재사용성을 크게 향상시켰습니다.
2. 선언적 권한 관리로 사용자 경험 지키기
학생, 선생님, 관리자 등 다양한 역할(Role)이 존재하는 서비스에서 권한 관리는 매우 중요했습니다. 페이지에 진입한 뒤에야 권한 없음을 알리거나, 권한에 맞지 않는 UI가 잠시 깜빡이며 보이는 경험은 서비스의 신뢰도를 떨어뜨린다고 생각했습니다.
저는 HOC(Higher-Order Component) 패턴을 활용해 라우트 레벨에서 권한을 선언적으로 검증하는 시스템을 구축했습니다. 이를 통해 사용자는 자신의 권한에 맞는 화면만 즉시 볼 수 있게 되어 매끄러운 사용자 경험을 제공할 수 있었고, 권한 로직이 한 곳에서 관리되어 유지보수성 또한 높아졌습니다.
3. 교육 콘텐츠의 특수성: 수학 수식 렌더링
교육 플랫폼의 특성상, 복잡한 수학 수식을 웹에서 정확하고 깔끔하게 보여주어야 했습니다. 이미지를 사용하는 방식은 해상도와 관리 비용 문제가 있었기에, KaTeX 라이브러리를 기반으로 동적으로 수식을 렌더링하는 컴포넌트를 개발했습니다. 이 컴포넌트는 LaTeX 문법을 HTML로 변환하여, 어떤 환경에서도 깨끗한 벡터 기반의 수식을 보여줌으로써 학생들의 학습 몰입도를 높이는 데 기여했습니다.
안정성을 뒷받침하는 백엔드 API
- 보안 강화된 인증 시스템: 안전하고 표준화된 사용자 인증을 위해 JWT(JSON Web Token) 기반의 인증 기능을 OAuth 2.0 프로토콜에 맞춰 구현했습니다.
- 데이터베이스 안정성 및 유연성 확보: 데이터베이스 상호작용 시 발생할 수 있는 SQL Injection 공격을 방어하기 위해 ORM(Object-Relational Mapper)을 적극적으로 활용했어요. 동시에 DTO(Data Transfer Object) 패턴을 적용하여 데이터 스키마 변경에도 유연하게 대응할 수 있는 구조로 설계하여 코드 안정성과 유지보수성을 동시에 높였습니다.
- API 문서 자동화로 협업 효율 증진: 다른 개발자들이 API를 쉽고 빠르게 이해하고 사용할 수 있도록, Swagger를 도입해서 API 문서를 자동으로 생성하고 관리했어요. 이는 개발팀 전체의 생산성 향상과 원활한 협업에 기여했습니다.
- CI/CD 파이프라인 구축: 서버 배포 과정을 더 안정적이고 효율적으로 만들고자, Docker를 사용해 애플리케이션을 컨테이너화하고 Jenkins를 활용하여 CI/CD 파이프라인을 구축함으로써 배포 자동화를 이루어냈습니다.