이현명 Frontend Engineer

배포 파이프라인 재구성

2단계 수동 배포 → 단일 실행

Situation

배포할 때마다 preflight(사전 배포)를 실행하고, 완료되기를 기다렸다가 switch(전환)를 다시 실행해야 하는 번거로운 2단계 수동 절차였습니다. switch를 잊어도 아무 오류가 나지 않아 구버전이 계속 서비스됐고, 실제 106분간 방치된 사례가 발생했습니다.

Action

• preflight와 switch가 한 번의 실행으로 이어지도록 워크플로우 재구성
• 배포 환경 하나만 선택하면 실행되도록 절차 단순화

Result

배포 리드타임(사람 대기 포함) 중앙값 4.2분 → 1.4분, 최대 106분이던 편차 7분 이내. switch 누락 같은 휴먼 에러가 구조적으로 발생하지 않는 배포로 전환했습니다.

Tech

GitHub Actions

퀵계좌이체(토스 PG) 연동

웹뷰 인증 복귀 플로우 설계

Situation

계좌 결제는 토스 페이지에서 인증을 마친 뒤 결제로 이어지는 흐름인데, 뒤로가기를 누르면 이미 끝난 인증 화면이 다시 나타나는 문제가 있었습니다. 공식 문서에는 인증 후 복귀 구간의 안내가 없어 직접 설계가 필요했습니다.

Action

• 토스 SDK 인증 플로우를 연동하고, 정기결제 등록·단건 결제·정기 첫결제·정기결제 관리 4종 결제 플로우에 대응
• 인증을 별도 화면에서 진행하고 끝나면 바로 닫아, 끝난 인증 화면이 다시 보이는 문제를 차단
• 완료·취소를 구분해, 완료 시 결제 단계로 진행하고 취소 시 오류 없이 결제 화면으로 복귀

Result

정기결제 등록부터 관리까지 4종 결제 플로우를 연동해 결제수단을 확장했고, 공식 문서가 다루지 않던 복귀 구간을 설계로 해결해 배포 후 프론트엔드 귀속 결함 0건으로 마감할 수 있었습니다.

Tech

TypeScript, React, Toss Payments SDK, WebView, Custom Hooks

게시글 발송 로직 통합

4곳 수정을 1곳으로

Situation

알림장·공지사항·앨범·투표 4개 발송 화면이 업무시간 판단을 각자 갖고 있어, 정책이 바뀌면 4곳을 모두 수정해야 했습니다. 학부모와 교사의 발송 정책도 달라 분기가 얽히는 구조였습니다.

Action

• 화면마다 따로 있던 업무시간 판단을 공통 모듈 하나로 통합
• 학부모·교사 역할별 정책 차이는 모듈 내부에서 분리

Result

정책 변경 반영 지점이 4곳 → 1곳으로 줄었습니다. 같은 로직을 화면마다 찾아 수정하던 구조가 모듈 하나만 관리하는 구조로 바뀌어, 정책이 바뀌어도 수정 범위가 늘지 않습니다.

Tech

TypeScript, React, Custom Hooks, react-i18next

애니메이션 조정 도구

디자인 확정 과정의 개발자 의존 제거

Situation

5개 화면에 공감 기능을 구축하는 과정에서, 파티클 애니메이션의 느낌을 디자이너가 수치로 특정하기 어려워 요청 → 수정 → 재확인 핑퐁으로 확정이 지연되곤 했습니다.

Action

• 핑퐁을 줄이기 위해, 애니메이션 값을 실제 화면에서 조정하고 재생해 볼 수 있는 패널을 먼저 제작
• iOS/Android와 애니메이션 값을 맞춰 플랫폼 간 동일한 효과 제공

Result

디자이너가 원하는 느낌을 수치로 설명하는 대신 직접 조정해 골라 전달하는 방식이 되면서, 요청·수정·재확인 왕복이 줄고 애니메이션 확정까지의 의사결정이 빨라졌습니다.

디자이너용 튜닝 패널 · 수치 조절 → 실시간 효과 변화

리액션 선택 시 재생되는 화면 효과

Tech

TypeScript, React, Canvas

보육일지 AI 컨설팅

요청 후 화면을 닫아도 되는 구조

Situation

교사가 작성한 보육일지를 AI가 항목별로 분석·첨삭해야 했는데, 처리에 수 분이 소요돼 기다리는 동안 사용자가 화면에 묶이는 상황이었습니다.

Action

• AI 처리 완료 여부를 백그라운드에서 주기적으로 확인하는 구조를 설계
• 창을 닫아도 확인이 계속되도록 유지하고, 완료 시 전역 알림으로 안내
• 로딩 화면(Lottie)과 결과 리포트 모달, 리포트 출력 기능을 구현

Result

수 분의 처리가 끝날 때까지 화면에 묶여 있던 흐름이, 요청 후 다른 작업을 이어가다 완료 알림으로 확인하는 흐름으로 바뀌었습니다. 창을 닫아도 확인은 백그라운드에서 유지됩니다.

Tech

TypeScript, React, TanStack Query, Recoil, Lottie

jQuery 마이그레이션

Lighthouse 30점대 → 80점대

Situation

jQuery 기반으로 모든 기능이 한 덩어리로 묶여 있어 유지보수·확장이 어려웠고, 메인 화면 초기 로딩이 느려 Lighthouse 성능 점수가 30점대에 머물렀습니다.

Action

• React/TypeScript로 재구축하며 프론트엔드와 백엔드를 분리
• 레이아웃 템플릿 및 컴포넌트 계층 설계
• 초기 로딩 병목을 8개 iframe 일괄 렌더 방식으로 특정하고, 화면 단위 코드 분할·이미지 지연 로딩 적용
• 개발·운영 환경 분리 및 Nginx·Jenkins 기반 빌드/배포 프로세스 구축

Result

Lighthouse 메인 화면 성능 점수가 30점대에서 80점대로 올랐고, 화면과 데이터를 독립적으로 배포할 수 있는 구조가 됐습니다.

Tech

TypeScript, React, Nginx, Jenkins