본문으로 건너뛰기

loopy 메뉴

SELECTED WORK

판단과 검증이 남은 작업

어떤 문제를 만났고, 왜 그 방법을 선택했는지. 구현 결과와 실제 확인한 범위를 함께 정리했습니다.

01

당근 · 2026.05 - 2026.08

신규 상품 상태 모델링

Frontend Engineer Intern · React / TypeScript / GraphQL / Relay

화면·CTA·이벤트가 같은 상태를 읽도록

문제

기존 상품과 결제·이용 상태가 달라 UI와 로직을 그대로 재사용할 수 없었습니다. 상태가 섞이면 잘못된 CTA, 결제 승인 상태 오판과 이벤트 누락이 함께 발생할 수 있었습니다.

선택한 방법

  • 서버 값을 렌더링 조건문에 직접 연결하기보다 도메인 상태에서 화면 상태·행동 가능 여부로 이어지는 계약을 먼저 정리했습니다.
  • 이용권·결제·진행률·공개·환불·마감 조건을 분리하고, 결제를 준비·결제창·승인·활성화 단계로 나눴습니다.

구현과 확인

  • GraphQL/Relay 기반 구현 참여 범위에서 React·TypeScript로 화면 상태와 CTA 규칙을 반영했습니다.
  • 약 10단계 퍼널의 실패 위치·오류 유형을 나눠 이벤트 요구사항과 검증 포인트를 남겼습니다. 성공·실패·취소 지표의 누락 위험도 함께 확인했습니다.

확인한 결과

퍼널
약 10단계
결과
예외 화면 기준 정립

상태는 렌더링 분기에서 끝나지 않습니다. CTA와 실패 대응, 분석 이벤트가 같은 도메인 계약을 읽어야 운영에서 원인을 추적할 수 있습니다.

02

세븐픽쳐스 · 2026.02

Bun·CI/CD 전환

Software Engineer · Bun / Docker / GitHub Actions

운영 중인 네 프로젝트를 점진적으로 전환

문제

CI/CD 실행에 13분이 걸려 작은 변경도 배포 결과를 확인하는 비용이 컸습니다. 운영 중인 네 프로젝트의 호환성과 배포 안정성을 함께 지켜야 했습니다.

선택한 방법

  • Bun 벤치마크와 프로젝트별 호환성을 확인한 뒤 점진적 전환을 선택했습니다.
  • 설치·이미지 빌드·배포 단계를 나눠 병목과 실패 범위를 좁혔습니다.

구현과 확인

  • npm/yarn을 Bun으로 전환하고 Docker 3-stage 병렬 빌드와 캐시 레이어 재사용을 적용했습니다.
  • GCloud Action을 갱신하고 GitHub Actions에 pre-merge 테스트를 추가해 실행 시간과 배포 상태를 함께 확인했습니다.

확인한 결과

실행 시간
13분 → 6분 39초
단축률
약 49%
해당 전환 범위의 배포 후 장애
0건

속도 개선과 호환성 확인을 같은 완료 조건으로 묶었습니다. 프로젝트별로 바꾸며 실패 범위를 작게 유지했습니다.

과정을 담은 글
03

세븐픽쳐스 · 2025.11

Flutter OOM 디버깅

Software Engineer · Flutter / Crashlytics / DevTools / LRU cache

문제가 난 기기에서 다시 쌓이는 조건을 제한

문제

저사양 기기의 채팅방 진입 시 앱이 종료됐습니다. 일시적인 캐시 삭제로 끝내기보다 원본 이미지가 스크롤 중 누적되는 경로를 찾아야 했습니다.

선택한 방법

  • 같은 기기와 행동 순서를 고정하고 Crashlytics 로그·반복 재현·DevTools 프로파일링을 대조했습니다.
  • 입력 이미지 크기, 캐시 보존량과 정리 시점을 각각 제한하기로 했습니다.

구현과 확인

  • 표시 크기에 맞춘 이미지 다운샘플링, LRU 캐시 정책과 메모리 임계치 기반 선제 정리를 적용했습니다.
  • 같은 조건에서 변경 전후 메모리를 비교하고, Crashlytics로 같은 흐름의 크래시가 다시 발생하는지 별도로 확인했습니다.

확인한 결과

앱 메모리
1.5GB → 700MB
감소율
약 53%
저사양 기기
OOM 크래시 해소

캐시를 한 번 비우는 것보다 다시 쌓이는 조건을 제한하는 것이 중요했습니다. 수치 감소와 실제 크래시 해소를 나눠 확인했습니다.

과정을 담은 글
04

세븐픽쳐스 · 2025.10 - 2025.12

화상 인터뷰 시스템

Software Engineer · Next.js / Server Actions / Result / PM2

성공·실패 계약부터 14일 출시까지

문제

외부 화상 도구와 인터뷰 피드백을 연결하는 반복 업무가 흩어져 있었습니다. 짧은 일정 안에 구현·배포와 운영팀이 사용할 실패 대응 경로를 갖춰야 했습니다.

선택한 방법

  • UI·API·에러 케이스를 먼저 문서화하고 성공 결과와 실패 오류 형식을 정리했습니다.
  • Server Actions + Result 패턴으로 화면마다 흩어질 수 있는 오류 흐름을 일원화했습니다.

구현과 확인

  • Next.js로 기능을 구현하고 PM2로 배포했습니다. 로그·장애 대응·보안·알림·기기·네트워크 확인을 배포 후 체크리스트로 연결했습니다.
  • 출시 후 인터뷰 편집·검사·합격 처리와 탈락자·중복 신청 취소 스케줄러까지 후속 업무의 자동화 범위를 넓혔습니다.

확인한 결과

구현부터 출시까지
14일
확인 기준
배포 상태·운영팀 피드백

짧은 일정일수록 결과·오류 형식과 배포 확인을 하나의 완료 조건으로 묶어야 했습니다.

함께 쌓아온 경험

당근엔터프라이즈 운영 내역

2026.05 - 2026.08 · Frontend Engineer Intern

개발·QA가 같은 예외 기준을 읽도록

문제

본사 예산으로 운영되는 지점에서는 기존 사용 내역 화면을 그대로 재사용할 수 없었습니다.

선택한 방법

  • 내역을 예산 추가·회수·사용으로 나누고 월 단위 조회와 지점 선택을 함께 정리했습니다.

구현과 확인

  • 페이지네이션과 예외를 개발·QA가 같은 기준으로 읽도록 정리하고 구현·배포에 참여했습니다.
  • 배포 후 실제 진입 경로와 확인 방법을 팀에 공유했습니다.

확인한 결과

완료 범위
구현·배포 참여

화면 조건뿐 아니라 팀이 같은 경로로 이슈를 재현할 수 있는 확인 방법을 남겼습니다.

당근Frontend 개발 도구 전환

2026.05 - 2026.08 · Frontend Engineer Intern

로컬·CI의 검사 기준을 함께 정리

문제

복수 Frontend 프로젝트의 검사 도구를 전환하며 로컬·CI 실행 차이와 포맷 기준을 함께 정리해야 했습니다.

선택한 방법

  • 기존 ESLint·Prettier 검사와 실행 시간·포맷 기준을 비교했습니다.

구현과 확인

  • lint·format을 oxlint·oxfmt로 전환하고 로컬·CI의 검사 차이를 정리했습니다.

확인한 결과

완료 확인
기본 브랜치 반영

도구를 설치한 시점이 아니라 실제 검사 경로와 기본 브랜치 반영을 확인한 시점을 완료로 판단했습니다.

버즈빌Next.js 15 SDK 빌드 복구

2025.01 - 2025.04 · Frontend Intern

번들 실패 원인부터 배포 차단 해소까지

문제

Turbopack에서 SDK 번들이 실패해 빌드와 배포가 차단됐습니다.

선택한 방법

  • GitHub Issue로 원인을 추적하고 빌드 경로에서 실패 조건을 확인했습니다.

구현과 확인

  • Webpack 폴백 구성을 적용하고 빌드 성공 기록으로 결과를 확인했습니다.

확인한 결과

결과
빌드·배포 차단 해소

도구의 도입 여부보다 실제 배포 경로에서 성공하는 조건을 확인하는 데 집중했습니다.