이현명 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

단건 결제부터 정기결제까지 연동해 계좌 기반 결제수단을 확장했고, 배포 후 프론트엔드 귀속 결함 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

신규 서비스 분리 구축

Lighthouse 30점대 → 80점대

Situation

Java·jQuery 기반 사이트에 모든 기능이 한 덩어리로 묶여 있어 유지보수가 어려웠고, 메인 화면은 Lighthouse 성능 점수가 30점대(Google 기준 0~49 '나쁨' 구간)에 머물렀습니다.

Action

• 기존 사이트의 기능과 UI를 기준으로 React·TypeScript 기반 신규 사이트 구축
• 로그인 후 계정 유형에 따라 기존 사이트와 신규 사이트로 나눠 진입하도록 연결
• 초기 로딩 병목을 8개 iframe 일괄 렌더링으로 특정하고, 신규 사이트에서는 iframe을 실행할 때만 로드하도록 설계 (화면 단위 코드 분할·이미지 지연 로딩 병행)
• 개발·운영 환경 분리 및 Nginx·Jenkins 기반 빌드/배포 프로세스 구축

Result

같은 기능을 담은 메인 화면 기준으로 Lighthouse 성능 점수가 기존 사이트 30점대에서 신규 사이트 80점대로 측정됐고, 신규 사이트는 별도 빌드·배포 환경에서 레거시와 독립적으로 배포되는 구조가 됐습니다.

Tech

TypeScript, React, Nginx, Jenkins