비즈니스 임팩트를 기술로 구현하는 5년 차 개발자 윤재혁입니다.

Next.js와 React Native를 활용해 아이디어를 빠르게 프로덕트로 실현하며, 다수의 B2C 서비스 런칭 경험을 통해 사용자 중심의 인터페이스를 설계해 왔습니다. 개인의 기술적 성취를 팀의 성장으로 발전시키는 지식 공유를 즐기며, 데이터 기반의 문제 해결로 유의미한 비즈니스 전환을 만들어내는 데 집중합니다.

👉 블로그 바로가기

1. AI 기반 운영 자동화 및 장애 대응 시스템 구축

• 콘텐츠 자동화 파이프라인: Claude 스케쥴러와 GitHub Actions를 연동하여 콘텐츠 생성, SNS 포스팅, 마케팅 성과 수집 전 과정을 자동화함으로써 1인 운영 리소스를 최적화했습니다.

• 자가 치유형 장애 대응: Vercel 및 Supabase의 에러 로그를 감지하여 AI가 원인을 분석하고 수정 PR을 자동 생성하는 워크플로우를 도입, 서비스 다운타임을 최소화하고 운영 안정성을 높였습니다.

• 데이터 기반 마케팅 실험: 마케팅 지표 수집 및 실험 자동화 시스템을 통해 실시간 성과를 추적하고, 이를 마케팅 전략에 즉각 반영하는 데이터 드리븐 운영 체계를 구축했습니다.

2. 고품질 개인화 콘텐츠 생성 로직 설계

• 다각도 파라미터 매핑: 사용자 데이터를 다차원 변수로 분석하고 매핑하는 로직을 설계하여, 중복 없는 고품질의 개인화 맞춤형 결과물을 생성하도록 시스템을 고도화했습니다.

• 응답 정형화 및 데이터 신뢰성 확보: Zod 스키마를 활용해 비정형 AI 응답 데이터를 구조화하고, 70여 개의 단위 테스트를 통해 연산 로직의 정확성과 데이터 무결성을 검증했습니다.

3. 풀스택 제품 구축 및 비즈니스 성과

• 신속한 MVP 구축 및 시장 진입: Next.js 15와 Supabase를 활용해 결제 시스템(TossPayments)이 통합된 제품을 단기간에 개발하여, 출시 당일 4,000건 이상의 유료 결제를 기록하며 비즈니스 가치를 증명했습니다.

• 데이터 보안 및 아키텍처 확장성: Supabase RLS 정책을 통해 사용자 데이터 보안을 강화하고, 서비스 성장 단계에 따른 데이터베이스 마이그레이션을 안정적으로 수행했습니다.

웹, 모바일 앱, 크롬 확장 프로그램을 연동한 통합 콘텐츠 관리 플랫폼

• 팀 구성: 개발자 2명, 디자이너 1명

• 역할: 백엔드 시스템 아키텍처 설계 및 프론트엔드/모바일 핵심 기능 개발 주도

1. 다단계 폴백 기반의 고성능 크롤링 서비스 구축

• 4단계 지능형 추출 전략 설계: 웹사이트별 특성에 대응하기 위해 [정적 Fetching ➔ YouTube API ➔ Playwright 동적 렌더링 ➔ 프록시 우회] 순서의 폴백 메커니즘을 구현하여 콘텐츠 추출 성공률을 극대화했습니다.

• 비동기 처리 최적화: FastAPI와 비동기 프로그래밍을 활용해 다중 요청을 효율적으로 처리하고, 불필요한 리소스(CSS, 폰트 등) 필터링을 통해 브라우저 렌더링 속도를 높였습니다.

• 도메인별 최적화: 도메인 특성에 따라 API 우선 순위나 프록시 사용 여부를 자동으로 결정하는 분류 시스템을 구축하여 크롤링 효율과 정확도를 동시에 확보했습니다.

2. 크로스 플랫폼 사용자 경험 및 인터페이스 고도화

• 심리스한 수집 환경 구축: 웹 환경뿐만 아니라 크롬 확장 프로그램과 모바일 Expo Share Extension을 연동하여, 사용자가 어떤 환경에서도 즉시 링크를 저장할 수 있는 통합 수집 체계를 구현했습니다.

• 낙관적 UI 적용: 링크 저장 및 폴더 이동 등 빈번한 데이터 조작 시 사용자 체감 속도를 높이기 위해 낙관적 업데이트를 적용하여 즉각적인 피드백을 제공했습니다.

3. AI 콘텐츠 분석 연동 및 리소스 관리 효율화

• 자동 요약 및 태깅 파이프라인: 수집된 링크 본문을 AI가 분석하여 요약문과 카테고리 태그를 자동 생성하는 기능을 구축하고, LLM 응답의 정형성을 보장하기 위한 검증 로직을 적용했습니다.

• 이미지 데이터 관리 최적화: S3 업로드 시 이미지 해시값을 비교하여 동일 이미지의 중복 업로드를 방지하고, 클라우드 스토리지 자원 및 비용을 효율적으로 관리했습니다.

[활용 기술 스택]

• Backend: NestJS, MySQL, FastAPI (Python)

• Frontend: Next.js, React, Tailwind CSS

• Mobile: React Native, Expo

• Infrastructure/Etc: OpenAI API, Chrome Extension, Docker, AWS, GitHub Actions

B2B 광고주 셀프 서브 플랫폼 개발 (Next.js)

• 데이터 페칭 전략 재설계: Next.js의 캐싱 메커니즘을 활용하기 위해 Axios 대신 Native Fetch 기반 커스텀 래퍼를 구현했습니다. SSR 환경에서 응답을 어디까지 캐싱할지, 어떤 시점에 재검증할지에 대한 규칙을 명시화하고, 동일 키 요청의 중복 호출을 제거했습니다.

• SSR 환경 상태 격리: 단일 Zustand 스토어가 서버 환경에서 요청 간 공유되어 발생할 수 있는 상태 오염 가능성을 확인하고, React Context로 스토어 인스턴스를 주입하는 구조로 전환했습니다. 멀티테넌트 운영 환경에서 사용자 간 데이터 섞임을 방지했습니다.

• 광고 설정 DataGrid: 대량 광고 설정을 다루는 DataGrid 화면에서 Custom Cell Renderer를 도메인 단위로 모듈화해 행/열 컴포넌트의 재사용성과 유지보수성을 확보했습니다.

• 모바일 시뮬레이터: 광고주가 실제 모바일 노출 화면을 설정 단계에서 바로 확인할 수 있는 시뮬레이터를 별도 컴포넌트로 구현해, 설정 단계에서 발생하던 노출 오류를 사전에 잡을 수 있도록 했습니다.

• 결제 연동 (KG이니시스): 광고비 충전 및 카드 등록 기능을 담당했습니다. 결제 상태의 비동기 응답에 대한 폴링·웹훅 처리, 중복 결제·취소·환불 케이스의 상태 정합성 검증 로직을 작성했습니다.

모노레포 기반 디자인 시스템 설계

• 사내 여러 프로젝트가 공유하는 컴포넌트 라이브러리를 Antd 기반으로 확장했습니다. 컴포넌트 계층을 아토믹 디자인 원칙에 따라 구분하고, 도메인별로 확장이 필요한 지점을 명세에 분리해 두어 모노레포 내 다른 프로젝트가 동일 인터페이스를 공유할 수 있도록 했습니다.

• 디자이너와 컴포넌트 명세(prop, 상태, 변형)를 함께 정의해, 시안과 구현 사이에서 발생하던 재작업을 줄였습니다.

사내 운영 도구 개선

• 모달 중심으로 동작하던 Admin 화면을 페이지 단위 레이아웃으로 개편했습니다.

• 검색 필터 + 데이터 테이블 + 페이징의 반복 패턴을 공통 레이아웃 컴포넌트로 추출해, 신규 운영 페이지를 추가할 때 비즈니스 로직 작성에만 집중할 수 있는 구조로 정리했습니다.

기타

• 버전 관리와 코드 리뷰 문화가 자리 잡지 않은 환경에서, 약 6개월에 걸쳐 팀과 합의해 브랜치 운영 규칙과 커밋·PR 메시지 컨벤션을 정착시켰습니다.

• 동료 간 교차 리뷰가 자리 잡은 뒤 GitHub Actions 기반 자동 검증과 Gemini Code Review를 도입해, 리뷰 대기 시간과 단순 실수로 인한 재작업 빈도를 줄였습니다.

• 주 1회 로테이션 방식의 기술 발표 세션을 제안하고, 운영했습니다. 발표 이후 실무에서 마주친 이슈와 해결 과정을 정리해 팀 내 공유 자료로 남기는 흐름을 만들었습니다.

1. 대량 데이터 테이블 렌더링 성능 최적화 (90% 이상 개선)

• 성능 병목 해결: 전자문서 대량 발송 시 수백 명의 대상자 정보를 테이블 UI에 반영하는 과정에서 발생하는 브라우저 과부하 및 실행 지연 문제를 해결했습니다.

• 렌더링 로직 최적화: 라이브러리(Handsontable) 내부 훅의 중복 호출이 성능 저하의 원인임을 파악하고, 이를 제거하는 대신 순수 HTML 주입 및 이벤트 위임방식을 도입하여 DOM 조작을 최소화했습니다.

• 지연 렌더링 적용: 모든 셀의 에러 메시지를 실시간으로 생성하는 방식에서, 평상시에는 시각적 상태만 표시하고 사용자 포커스 시에만 상세 정보를 노출하는 방식으로 연산 부하를 분산했습니다.

• 결과: 데이터 로드 및 렌더링 소요 시간을 기존 대비 90% 이상 단축하여 대량 데이터 처리 환경에서도 안정적인 사용자 경험을 제공했습니다.

2. 전자문서 내 엑셀 수식 자동 연산 모듈 설계 및 개발

• 비즈니스 로직의 모듈화: 전자문서 내 복잡한 수식(합계, 평균 등)의 실시간 계산 기능을 구현하기 위해, UI 프레임워크에 종속되지 않는 독립적인 연산 엔진을 설계했습니다.

• 객체 지향 및 디자인 패턴 적용:

  • Observer Pattern: 셀 간 참조 관계를 정의하여 데이터 변경 시 연쇄적인 자동 업데이트가 이루어지는 반응형 상태 관리를 구현했습니다.

  • Factory Pattern: 수식 종류와 유효성 검사 규칙에 따라 객체를 동적으로 생성하여 코드의 확장성을 확보했습니다.

  • Decorator Pattern: 입력 데이터의 원본을 유지하면서 도메인별 포맷팅 로직을 유연하게 주입할 수 있도록 설계했습니다.

• 결과: 복잡한 연산 로직을 구조화하여 코드의 응집도를 높였으며, 신규 수식이나 포맷 추가 시 기존 코드 수정 없이 대응 가능한 유지보수성이 높은 아키텍처를 구축했습니다.

3. Cypress 기반 E2E 테스트 환경 구축 및 자동화

• QA 프로세스 효율화: 서비스 복잡도 증가에 따른 수동 QA의 한계를 극복하고자 E2E 테스트 도입을 주도했습니다. 실행 속도와 유지보수 편의성을 고려하여 Cypress를 최종 프레임워크로 채택했습니다.

• 자동화 파이프라인 연동: 모든 Pull Request 단계에서 핵심 유저 시나리오가 자동 검증되도록 GitHub Actions와 연동된 CI/CD 파이프라인을 구축했습니다.

• 결과: 프로덕션 배포 전 결함을 사전에 차단하여 서비스 안정성을 높였으며, 반복적인 수동 테스트 리소스를 절감하여 개발 피드백 루프를 단축했습니다.