Description.

오픈놀(OPENKNOWL) 에서 미니인턴 사업부 B2C/B2B/관리자 서비스의 프론트엔드 개발과 플랫폼 아키텍처 개선을 담당했습니다.

Tech Stack.

What I did.

• Turborepo를 활용한 빌드 파이프라인 최적화

  3개 독립 도메인 프로젝트의 CI/CD 빌드 시간 문제를 해결하기 위해 Turborepo 모노레포 아키텍처를 도입했습니다. 공통 컴포넌트 패키지화와 선택적 빌드 메커니즘으로 빌드 시간 40% 단축(14분→8분)을 달성했습니다.

• 디자인 시스템 구축 및 컴포넌트 표준화

  프로젝트마다 다른 UI로 인한 개발 지연과 품질 이슈를 해결했습니다. Atomic Design 디자인 시스템과Storybook 자동화 테스트로 신규 기능 개발 속도를 대폭 향상시키고 디자이너 피드백 사이클을 단축했습니다.

• BFF 패턴을 통한 레거시 어드민 API 통합

  레거시가 많은 어드민 페이지의 일부 복잡한 구버전, 신버전 API를 BFF를 통해 통합하여 프론트엔드에서 일관된 데이터 인터페이스를 제공했습니다.

Description.

생성형 AI 기술을 활용해 자기소개서 작성을 지원하는 서비스 MVP를 개발했습니다. 사용자의 키워드와 경험을 바탕으로 기업별 맞춤형 문장을 생성하고 편집할 수 있는 기능을 제공합니다.

What I did.

• 최적화된 에디터 라이브러리 선정을 통한 개발 효율성 향상

  빠른 MVP 출시를 위해 Toast UI Editor와 Quill.js를 비교 분석했습니다. 서비스 요구사항에 적합한 Quill.js의 모듈형 아키텍처를 선택하여 필수 기능만 선별적으로 구현했습니다. 인터페이스를 신속하게 구현하여 시장 반응을 조기에 확인할 수 있는 기반을 마련했습니다.

• API 호출 대기 시간 동안의 사용자 경험 개선

  AI 추천 기능 사용 시 발생하는 대기 시간 동안 사용자가 시스템 오류로 오인하거나 지루함을 느끼지 않도록 UX 개선 방안을 적용했습니다. AI 분석 과정 시각화를 통해 세분화된 안내 메시지를 제공하고, 비동기 API 설계로 로딩 중에도 인터페이스 반응성을 확보하여 사용자 이탈률을 감소시켰습니다.

Description.

사용자의 직무 경험을 인터랙티브 애니메이션으로 기록하고 공유할 수 있는 서비스입니다.서비스 소개 관련 아티클

What I did.

• 인터랙티브 시각화를 통한 사용자 참여도 향상

  단순한 텍스트 나열로는 사용자들의 지속적인 관심과 몰입을 이끌어내기 어렵다는 점에 주목했습니다. Matter.js 물리 엔진의 실제적인 중력과 충돌 효과를 활용해 사용자의 경험 기록이 가상의 병 속으로 자연스럽게 떨어지고 쌓여가는 시각적 경험을 제공했습니다.

• Matter.js 다각형 구현

  사용자들에게 더욱 풍성한 시각적 경험을 제공하기 위해 다양한 형태의 인터랙티브 오브젝트가 필요했습니다. Matter.js 라이브러리가 복잡한 다각형 생성을 직접 지원하지 않는 상황에서, 각 꼭짓점의 좌표를 계산하여 오각형과 육각형을 직접 구현했습니다. 이를 통해 기존 오브젝트에서 벗어나 다채로운 모양의 요소들이 떨어지고 쌓이는 역동적인 인터랙션을 완성할 수 있었습니다.

Description.

성능과 개발 경험 향상을 위해 Next.js Pages Router를 App Router로 마이그레이션하는 탐색적 프로젝트를 진행했습니다. 기술 전환의 비용-효과 분석을 통해 조직의 기술 도입 의사결정에 기여했습니다.

What I did.

• 서버 컴포넌트 아키텍처 도입을 통한 성능 최적화 실험

  초기 렌더링 성능과 번들 크기 최적화를 위해 B2C 도메인을 App Router 기반으로 마이그레이션했습니다. 데이터 패칭 로직을 서버 컴포넌트로 이동시키고, 인터랙티브 요소만 클라이언트 컴포넌트로 분리하는 아키텍처를 설계했습니다. 이 과정에서 React Server Components의 작동 방식과 제약 사항에 대한 이해를 얻었고, 서버-클라이언트 경계에서의 데이터 흐름을 효율적으로 관리하는 패턴을 개발했습니다.

• 기술 도입의 비용-효과 분석을 통한 전략적 의사결정

  마이그레이션 완료 후 실제 운영 환경에서 예상과 다른 결과를 경험했습니다. 새 버전으로 업그레이드하니 디버깅이 오히려 복잡해지고, 기존 라이브러리들과의 호환성 문제가 예상보다 많이 발생했습니다. 실제로 겪어본 결과 기대했던 성능 향상보다는 개발 복잡도가 증가하는 트레이드오프를 경험했습니다.

Description.

개발자와 디자이너가 실제 구현물이 디자인 의도대로 완성되었는지 빠르게 검증할 수 있는 서비스입니다. Figma 디자인 파일과 실제 구현된 웹사이트를 나란히 비교하여 색상, 여백, 크기 등의 차이를 유저가 직관적으로 확인할 수 있습니다. 브라우저에서 URL과 피그마 파일 경로를 입력하면 자동으로 스크린샷을 캡처하고 오버레이, 분할 화면 등 다양한 방식으로 비교할 수 있습니다.

Tech Stack.

What I did.

• Server-Sent Events 기반 실시간 진행률 시스템 도입

  Figma API 렌더링이 최대 55초까지 소요되어 유저가 작업이 중단된 것으로 오해 하고 새로고침하거나 페이지를 떠날 수 있는 상황을 예상했습니다. 이를 방지하기 위해Server-Sent Events(SSE)를 도입해 실시간 진행률을 추적하였습니다. 각 진행 단계별로 상태 메시지를 상태바로 표현하고 이미지 렌더링 과정을 시각적으로 표시하였습니다.

  또한 비동기 처리를 통해 렌더링이 진행되는 동안에도 유저가 다른 작업을 시작하거나 기존 히스토리를 확인할 수 있도록 구현하여, 대기 시간을 효율적으로 활용할 수 있는 논블로킹 워크플로우를 제공했습니다.

• Chrome Extension으로 iframe 크기 문제 해결

  웹사이트를 iframe으로 띄우면서 가장 큰 문제가 실제 콘텐츠 높이를 알 수 없다는 점이었습니다. 브라우저 보안 정책 때문에 외부 사이트의 높이 정보를 가져올 수 없어서, 정확한 디자인 비교가 불가능했습니다. 이 문제를 해결하기 위해Chrome Extension을 통해 iframe 내부에서 직접 크기를 측정하는 방법을 택했습니다. Extension이 웹페이지 안에서 DOM 크기를 재고, 그 정보를 React 앱까지 전달하는 구조를 만들어서 브라우저 제약을 우회했습니다.

• 드래그 앤 드롭 기반 인터랙티브 비교 시스템 개발

  단순히 이미지를 나란히 놓고 보는 것을 넘어서, 사용자가 직접 조작하면서 비교할 수 있는 인터랙티브 환경을 만들고 싶었습니다. @dnd-kit을 활용해 Figma 이미지를 자유롭게 드래그할 수 있게 하고, 오버레이 모드에서는 투명도를 조절하여 겹쳐서 비교하고, 분할 화면에서는 중앙 분할선을 드래그하여 왼쪽 iframe과 오른쪽 Figma 영역의 비율을 실시간으로 조절하면서 원하는 부분을 집중적으로 비교할 수 있도록 구현했습니다.

Description.

HR 웹사이트에 자동 로그인 기능을 제공하는 크롬 확장 프로그램 입니다. 일별 출/퇴근 알림 기능도 포함되어 있습니다.

현재 프로덕트팀 23명

Tech Stack.

What I did.

• webpack을 활용한 React 앱의 Chrome Extension 빌드

  설정 UI와 상태 관리의 복잡성으로 인해 React를 선택했고, React 앱을 Chrome Extension으로 변환하기 위해 webpack을 사용하여 entry point를 content script와 background script로 분리했습니다. 이를 통해 React의 개발 생산성을 유지하면서 Chrome Extension 배포가 가능했습니다.

• 출퇴근 기록 알림 기능 개발

  서비스 개시이후 팀원들의 추가 요청에 따라 출퇴근 기록 알림 기능을 개발했습니다. Chrome Extension API의 알림 시스템(chrome.notifications)과 백그라운드 작업 예약 기능(chrome.alarms)을 활용하여 정해진 시간에 자동으로 출퇴근 기록을 상기시켜 주는 알림 기능을 구현했습니다. chrome.storage API를 사용하여 개인별 알림 시간 설정을 저장하고, 설정된 시간에 크롬 푸시 알림이 자동으로 발생하도록 했습니다. 알림을 클릭하면 해당 페이지로 바로 이동하는 편의성도 제공했습니다. 이 기능 도입 후 팀 내 출퇴근 미기록 사례를 감소시켰습니다.

Description.

600+ 다운로드

Tech Stack.

What I did.

• TypeScript 프로젝트 문서화 자동화 시스템 개발

  개발 일정의 촉박함으로 인해 타입 문서화를 건너뛰다 보면 코드 베이스가 복잡해질수록 개발자들이 함수나 인터페이스의 의도와 용도를 파악하는 데 많은 시간을 소모하게 되는 문제를 목격했습니다.ChatGPT API와 VS Code Extension을 결합하여 단축키 하나로 완전한 TSDoc 주석을 생성하는 자동화 도구를 개발했습니다. 현재 실제 많은 개발자가 활용하며 문서화 작업 효율성을 크게 개선했습니다.

• 맞춤형 문서 시스템

  확장 프로그램 사용자가 늘어나면서 각자 다른 문서 작성 스타일을 원하는 문제가 생겼습니다. 이를 해결하기 위해 VS Code 설정 API를 활용해 상세한 맞춤 설정 기능을 만들었습니다. JSDoc이나 TSDoc 같은 문서 스타일 선택, @param이나 @returns 등 필수 태그 설정, 설명의 자세함 정도, 코드 예제 포함 여부까지 세밀하게 조정할 수 있게 했습니다. .vscode/settings.json과 연동해서 프로젝트 단위로도 설정할 수 있어 팀 전체가 같은 기준으로 문서를 작성할 수 있습니다.

Description.

개발자와 디자이너를 위한 고양이 이미지 플레이스홀더 서비스입니다. 웹 개발 시 손쉽게 사용할 수 있는 이미지 플레이스홀더를 제공하며, URL 매개변수만으로 원하는 크기와 텍스트 오버레이가 포함된 고양이 이미지를 동적으로 생성합니다.

Tech Stack.

What I did.

• 테스트용 이미지 준비 시간 지연 문제 해결

  QA 프로세스에서 테스트용 이미지 준비 시간 지연 문제를 인식했습니다. 테스트 중 다양한 해상도와 레이아웃에 맞는 이미지를 매번 찾거나 제작해야 하는 비효율성을 발견했습니다. 이를 해결하기 위해 Next.js의 ImageResponse를 활용한 고양이 이미지 생성 서비스를 구현했습니다. URL 매개변수만으로 원하는 규격(최대 8K)과 텍스트가 포함된 이미지를 즉시 생성하는 솔루션을 개발하여 QA팀의 테스트 리소스 준비 시간을 단축했습니다.

• 이미지 최적화 및 캐싱 전략으로 성능 극대화

  서비스 사용량 증가에 따른 성능 저하 문제를 예방하기 위해 효율적인 이미지 처리 파이프라인을 구축했습니다. 이미지 생성 결과를 Redis를 활용해 캐싱하고, CloudFlare CDN을 연동하여 글로벌 사용자에게 빠른 응답 속도를 제공했습니다.

Description.

리그 오브 레전드(LoL) 게임 영상을 자동으로 수집 · 편집하여 YouTube에 업로드하는 멀티 마이크로서비스의 핵심 컴포넌트로, 썸네일 자동 생성을 담당하는 서비스입니다.

게임 메타데이터(챔피언, KDA, 아이템 빌드 등)를 활용하여 맞춤형 썸네일을 제작하고, Headless Chrome과 Puppeteer를 통해 이미지를 캡처합니다. 다양한 언어권 채널에 최적화된 썸네일 템플릿을 제공하며, 유튜브 노출 효율을 높이기 위한 랜덤 패턴 생성 알고리즘을 적용했습니다.

Tech Stack.

What I did.

• Puppeteer 기반 안정적 렌더링 파이프라인 구축

  Puppeteer를 사용한 스크린샷 캡처 과정에서 복잡한 썸네일 렌더링때문에 간헐적으로 이미지가 1-2개씩 누락되는 문제가 발생했습니다. 페이지 내 모든 이미지 요소의 로드 상태를 추적하는 커스텀 감지 로직을 구현했습니다. useLayoutEffect를 활용해 렌더링 완료 상태를 명확하게 전달하는 커스텀 훅을 구현했습니다.