jtfox.dev

KT DS에서 진행한 ELIFUN 신규 개발 프로젝트에 참여해서, 메인 앱의 WebView 화면과 백엔드 API 개발을 담당했어요. 학생들의 학습 경험을 향상시키고 안정적인 서비스를 제공하는 데 중점을 두었습니다.

WebView 화면 개발

사용자 경험과 성능 최적화에 집중했어요.

메인 앱인 ELIFUN에서 WebView를 통해 호출되는 핵심 화면들을 개발했어요. 사용자들이 매끄럽게 서비스를 이용할 수 있도록 다음과 같은 부분에 신경 썼습니다.

주요 화면 구현: 사용자의 첫인상인 로그인 화면과 소셜 로그인 기능을 구현하고, 학생들이 매일 학습 목표를 달성할 수 있도록 데일리 테스트 화면을 개발했어요.
Native App 연동 강화: WebView 환경에서 Native App과 원활하게 데이터를 주고받기 위해, 메시지 송수신 로직을 캡슐화한 Custom Hook을 개발했어요. 이를 통해 Native 기능과의 연동을 더 효율적이고 안정적으로 처리할 수 있었죠.
선언적 권한 관리: React의 HOC(Higher-Order Component) 패턴을 활용해서, 사용자 역할(Role)에 따라 접근 권한을 코드 상에서 명확하게 선언하고 관리하는 시스템을 구현했어요. 덕분에 코드 가독성과 유지보수성이 향상되었어요.
성능 최적화 (번들 크기 축소): 사용자에게 더 빠른 로딩 속도를 제공하기 위해, Webpack의 TreeShaking 최적화를 적용하여 최종 빌드된 애플리케이션의 번들 크기를 효과적으로 줄였어요.
수학 수식 표현력 강화: 교육 콘텐츠의 특성을 고려해서, KaTeX 라이브러리를 기반으로 LaTeX 수학 수식을 웹 화면에 깔끔하게 표시하는 컴포넌트를 개발했어요. 복잡한 수식도 명확하게 전달되어 학생들의 학습 이해도를 높이는 데 기여했어요.

안정성과 확장성을 고려한 백엔드 시스템을 구축했어요.

WebView 화면들이 원활하게 동작하고 데이터를 안전하게 관리할 수 있도록 ASP.NET 기반의 백엔드 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 파이프라인을 구축함으로써 배포 자동화를 이루어냈어요.