카카오엔터테인먼트FE

RSS

게시글: 169
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

AI
Melon MCP
이 글은 멜론의 방대한 음악 데이터와 기능을 AI 에이전트와 안전하게 연결하기 위한 Melon MCP(Model Context Protocol) 서버 사용법을 안내합니다. 현재 베타 기능으로 제공되며, Anthropic의 Claude, 카카오의 PlayMCP와 같은 MCP 지원 AI 플랫폼 및 도구를 통해 멜론 음악 플랫폼과 상호작용할 수 있습니다. 이를 통해 사용자는 멜론의 음악 콘텐츠 검색, 실시간 차트 접근, 개인화된 음악 추천, 곡/앨범/아티스트 정보 조회, 개인 음악 컬렉션 관리, 스트리밍 통계 확인, 장르 탐색 등 다양한 작업을 수행할 수 있습니다. MCP 서버는 AI가 멜론의 서비스를 안전하게 활용할 수 있도록 지원하는 프로토콜입니다.
Melon MCPLLMAI 코딩 에이전트
카카오엔터테인먼트FE·2025년 9월 19일
AI
Melon MCP
본문은 Melon MCP(Model Context Protocol) 서버를 사용하여 AI 에이전트가 멜론의 방대한 음악 데이터와 기능에 안전하게 접근하는 방법을 안내하는 가이드입니다. 현재 베타 버전으로 제공되는 이 서버는 Anthropic의 Claude, Kakao의 PlayMCP와 같은 외부 LLM 플랫폼과 멜론 기능을 연동할 수 있게 합니다. 이를 통해 사용자는 음악 콘텐츠 검색, 차트 확인, 개인화된 추천, 플레이리스트 관리 등 다양한 멜론 서비스를 AI 에이전트를 통해 이용할 수 있습니다. 가이드에서는 MCP 클라이언트, 멜론 계정, 이용권 등의 요구사항과 함께 MCP 서버의 Endpoint URL 및 OAuth 2.0 인증 방식을 설명하며, 연결을 위한 고객 지원센터 연락처 정보도 제공합니다.
Melon MCPLLMAI 코딩 에이전트
카카오엔터테인먼트FE·2025년 9월 19일
Etc
AI와 엔터테인먼트가 만났다! 제3회 카카오엔터 해커톤, ENTERTHON 2024 현장 이야기
카카오엔터테인먼트에서 개최된 제3회 사내 해커톤 'ENTERTHON 2024'의 현장 후기입니다. 'Entertainment with AI'를 주제로 열린 이번 해커톤은 크루들이 AI 기술을 활용하여 엔터테인먼트 경험을 향상시키거나, 신사업을 발굴하고, 업무 효율화를 이루는 아이디어를 제안하고 실행하는 자리였습니다. 무박 2일간 카카오 AI 캠퍼스에서 진행되었으며, 다양한 직군이 참여하여 열정적으로 아이디어를 구현하는 과정을 공유했습니다. 이 행사는 카카오엔터테인먼트의 AI 관련 행사 중 하이라이트로, 기술과 엔터테인먼트의 융합을 통해 새로운 가치를 창출하려는 노력을 보여주었습니다.
카카오엔터테인먼트해커톤ENTERTHON 2024
카카오엔터테인먼트FE·2025년 1월 16일
Frontend
TurboRepo Just-in-Time Packages 적용기 Feat. ModuleResolution
카카오엔터테인먼트 스토리FE개발팀은 여러 서비스를 모노레포로 관리하며 공통 자원 관리에 힘쓰고 있습니다. 기존에는 Turborepo의 Compiled Packages 방식을 사용하여 공통 코드를 수정한 후 `tsc` 컴파일 과정이 필요했습니다. 이 글은 이러한 불편함을 해소하기 위해 Turborepo의 Just-in-Time Packages 방식을 도입하는 과정을 다룹니다. Just-in-Time Packages는 빌드 없이 소스를 바로 참조하여 개발 효율성을 높이는 방식입니다. 글에서는 이 방식의 소개와 실습, 그리고 적용 과정에서 발생한 문제 해결 경험을 공유하며, 특히 TypeScript의 `ModuleResolution` 설정이 Just-in-Time Packages 구현에 어떻게 중요한 역할을 하는지에 대한 학습 내용도 포함하고 있습니다.
TurborepoJust-in-Time PackagesModuleResolution
카카오엔터테인먼트FE·2024년 12월 10일
Frontend
TurboRepo Just-in-Time Packages 적용기 Feat. ModuleResolution
카카오엔터테인먼트 스토리FE개발팀은 여러 서비스를 모노레포로 관리하며 공통 자원 관리에 힘쓰고 있습니다. 기존에는 Turborepo의 Compiled Packages 방식을 사용하여 공통 코드를 수정한 후 `tsc` 컴파일 과정이 필요했지만, 이 글에서는 빌드 없이 소스 코드를 바로 참조할 수 있는 Just-in-Time Packages 방식으로 전환하는 과정을 다룹니다. Just-in-Time Packages 적용의 필요성, 실제 적용 방법, 그리고 이 과정에서 학습한 TypeScript의 `ModuleResolution` 옵션과 발생한 문제 해결 경험을 공유합니다. 이를 통해 모노레포 환경에서의 효율적인 공통 자원 관리 및 개발 생산성 향상 방안을 제시합니다.
TurborepoJust-in-Time PackagesModuleResolution
카카오엔터테인먼트FE·2024년 12월 10일
AI
지연 시간 순삭! LLM 추론 구조와 효율적 애플리케이션 설계 / if(kakaoAI)2024
if(kakaoAI)2024 컨퍼런스 발표 내용을 기반으로, LLM 기반 애플리케이션에서 발생하는 지연 시간을 최소화하는 방법에 대한 글입니다. 특히 캐릭터 페르소나 구현 경험을 통해 빠른 응답 속도를 달성한 노하우를 공유합니다. LLM의 시퀀스 생성 메커니즘을 분석하고, 이를 효율적으로 활용하여 애플리케이션의 지연 시간을 줄이는 구체적인 설계 전략을 탐구합니다. 이를 통해 사용자 경험을 극대화하고 실시간 응답 애플리케이션의 성능을 향상시키는 방안을 제시합니다.
LLM지연 시간추론 구조
카카오엔터테인먼트FE·2024년 11월 6일
AI
생성형 AI 기반의 웹툰 미리 보기 'Helix 숏츠' 개발기 / if(kakaoAI)2024
'Helix 숏츠'는 카카오엔터테인먼트에서 개발한 웹툰 미리보기 서비스로, 생성형 AI 기술을 적극 활용하여 탄생했습니다. 본 글은 이 프로젝트의 개발 과정에서 적용된 다양한 AI 기술과 구체적인 적용 방법, 그리고 개발팀이 프로젝트를 진행하며 얻은 경험과 노하우를 공유합니다. 특히 LLM(거대 언어 모델)을 활용한 웹툰 미리보기 기능 구현에 대한 내용을 다루며, 실제 서비스 개발 과정에서의 기술적 도전과 해결 과정을 엿볼 수 있습니다. 이 발표는 if(kakaoAI)2024 컨퍼런스의 일환으로 소개되었습니다.
생성형 AI웹툰미리보기
카카오엔터테인먼트FE·2024년 11월 6일
AI
최애 작품 이용권 선물해 주는 ‘Helix 푸시’ 개발기 / if(kakaoAI)2024
카카오엔터테인먼트의 'Helix 푸시' 서비스 개발기를 다룬 글입니다. 'Helix 푸시'는 사용자가 선호하는 작품의 이용권을 선물하는 서비스로, 미열람작 추천 모델과 기열람작 추천 모델로 나누어 개발되었습니다. 본문에서는 이 두 가지 모델 개발 과정에서 겪었던 시행착오와 이를 해결하기 위한 과정들을 공유합니다. 특히, LLM과 추천 시스템 기술을 활용하여 사용자 맞춤형 작품 추천을 제공하는 과정에 대한 경험을 중심으로 설명하고 있습니다. 이 글은 실제 서비스 개발 과정에서의 기술적 도전과 해결 방안을 엿볼 수 있는 기회를 제공합니다.
Helix 푸시추천 시스템LLM
카카오엔터테인먼트FE·2024년 11월 6일
Frontend
파일 변수 Deep-Dive
본 글은 카카오엔터테인먼트 스토리FE개발팀에서 다양한 웹 서비스를 운영하며 겪은 상태 관리의 어려움을 해결하기 위해 도입한 '파일 변수'라는 개념과 운영 노하우를 공유합니다. 초기에는 Redux를 사용하여 전역 상태를 관리했지만, 프로젝트 규모가 커지면서 한계에 부딪혔습니다. Redux의 미들웨어, Redux Toolkit, Redux Devtools 등의 장점을 활용했음에도 불구하고, 대규모 서비스에서는 상태 관리가 복잡해지는 문제를 경험했습니다. 이에 대한 해결책으로 파일 변수를 소개하며, 이 변수를 통해 어떻게 효율적으로 상태를 관리하고 운영할 수 있는지에 대한 구체적인 방법을 제시합니다.
파일 변수상태 관리Redux
카카오엔터테인먼트FE·2024년 7월 15일
Frontend
파일 변수 Deep-Dive
이 글은 카카오엔터테인먼트 스토리FE개발팀에서 다양한 웹 서비스를 운영하며 겪는 상태 관리의 어려움을 해결하기 위해 도입한 '파일 변수'라는 개념을 소개합니다. 초기에는 Redux를 사용하여 전역 상태를 관리했지만, 프로젝트 규모가 커지면서 한계에 부딪혔습니다. Redux의 미들웨어, Redux Toolkit, Redux Devtools 등의 장점을 활용했음에도 불구하고, 대규모 서비스에서는 상태 관리가 복잡해지는 문제를 경험했습니다. 이에 대한 해결책으로 파일 변수를 도입하게 된 배경과 그 활용 방안을 설명하며, 운영 노하우를 공유합니다. 이는 복잡한 웹 서비스에서 효율적인 상태 관리를 위한 실질적인 방안을 제시합니다.
파일 변수상태 관리Redux
카카오엔터테인먼트FE·2024년 7월 15일
AI
파일 변수 Deep-Dive
이 글은 Melon MCP(Model Context Protocol) 서버를 활용하여 Anthropic의 Claude, Kakao의 PlayMCP와 같은 AI 에이전트를 멜론의 방대한 기능 및 데이터와 안전하게 연동하는 방법을 안내합니다. AI 에이전트가 멜론 서비스의 다양한 기능과 데이터를 활용할 수 있도록 하는 프로토콜과 서버 구축에 대한 내용을 다룹니다. 이를 통해 AI 에이전트의 성능을 향상시키고 멜론 서비스와의 시너지를 창출하는 것을 목표로 합니다.
Melon MCPAI 코딩 에이전트Claude
카카오엔터테인먼트FE·2024년 7월 4일
Frontend
Next.js 캐싱으로 웹 서버 성능 최적화
이 글은 Next.js의 App Router를 사용하여 SSR(Server Side Rendering)을 구성한 신규 커머스 서비스에서 겪었던 낮은 TPS 문제를 해결하기 위한 경험을 공유합니다. 특히, Next.js의 Full Route Cache를 적극적으로 활용하여 서버 렌더링에 사용되는 CPU 리소스를 최소화하는 방법에 초점을 맞춥니다. 웹 서버 성능의 중요성과 이를 향상시키기 위한 전략을 설명하며, Next.js의 캐싱 메커니즘과 실제 적용 사례를 통해 성능 최적화의 효과를 보여줍니다. 이를 통해 CPU 사용량을 줄이고 전반적인 서버 성능을 개선하는 방법을 다룹니다.
Next.js캐싱웹 성능
카카오엔터테인먼트FE·2024년 5월 3일
Frontend
Next.js 캐싱으로 웹 서버 성능 최적화
본 글은 Next.js App Router 환경에서 SSR 성능을 최적화하기 위해 Full Route Cache를 활용한 경험을 공유합니다. 신규 커머스 서비스 오픈 전 부하 테스트에서 예상보다 낮은 TPS가 확인되어 문제 해결에 나섰습니다. 글에서는 웹 서버 성능의 중요성, 성능 향상 방안, Next.js의 캐싱 메커니즘, 그리고 실제 캐싱 적용 사례를 다룹니다. 특히 Full Route Cache를 적극적으로 사용하여 서버 렌더링에 필요한 CPU 리소스를 최소화함으로써 웹 서버 성능을 크게 향상시킨 경험을 상세히 설명합니다. 이를 통해 낮은 TPS 문제를 해결하고 안정적인 서비스 운영 기반을 마련했습니다.
Next.js캐싱웹 성능
카카오엔터테인먼트FE·2024년 5월 3일
Frontend
더 가치 있는 공통 컴포넌트 만들기
본 글은 React 기반의 웹 프런트엔드 개발에서 공통 컴포넌트를 더 가치 있게 만드는 방법에 대한 인사이트를 제공합니다. 잘 만들어진 공통 컴포넌트는 개발 속도 향상과 프로젝트 완성도 증진에 기여합니다. 글에서는 공통 컴포넌트의 정의나 철학보다는 실질적인 고민에 집중하며, 특히 재사용성을 높이기 위한 '확장 규칙 설계'의 중요성을 강조합니다. 무분별한 prop 확장을 지양하고, 프로젝트 상황에 맞는 확장 규칙 컨벤션을 설정하여 유연하게 대응하는 방안을 제시합니다. 또한, 컴포넌트 역할의 명확성을 통해 만능 컴포넌트화를 지양해야 함을 언급합니다. Typescript와 React를 기반으로 작성되었습니다.
React공통 컴포넌트UI 컴포넌트
카카오엔터테인먼트FE·2024년 1월 16일
Frontend
더 가치 있는 공통 컴포넌트 만들기
이 글은 React 기반의 웹 프론트엔드 개발에서 공통 컴포넌트를 더욱 가치 있게 만드는 방법에 대한 인사이트를 제공합니다. 잘 만들어진 공통 컴포넌트는 개발 속도 향상과 프로젝트 완성도 증진에 기여합니다. 글에서는 공통 컴포넌트의 재사용성을 높이기 위해 무분별한 prop 확장을 지양하고, 프로젝트별로 적절한 확장 규칙 컨벤션을 설정하는 것의 중요성을 강조합니다. 특히, 명확한 컴포넌트 역할 정의와 만능 컴포넌트 지양을 통해 유지보수성과 재사용성을 높이는 방안을 제시합니다. Typescript와 React 환경을 기반으로 작성되었습니다.
React공통 컴포넌트UI 컴포넌트
카카오엔터테인먼트FE·2024년 1월 16일
Frontend
마법소녀 이세계 아이돌 웹툰 런칭! BFF 장애 대응기
카카오페이지에서 유명 버추얼 아이돌 그룹 이세계 아이돌의 웹툰 런칭 당시 발생했던 BFF 서버 장애 대응 과정을 공유하는 글입니다. 런칭 당일 트래픽이 3배 이상 몰리면서 BFF 서버 CPU가 100%까지 치솟는 장애가 발생했고, 이에 대한 원인 분석 및 해결 과정을 상세히 다룹니다. 글쓴이는 BFF가 백엔드 API 응답을 가공하여 클라이언트에 전달하는 역할만 수행함에도 불구하고 CPU 부하가 발생한 원인을 찾기 위해 다양한 가설을 세우고 검증하는 과정을 설명합니다. 특히, 문제 해결 과정에서 얻은 꿀팁과 함께 성능 개선을 위한 접근 방식을 공유하여 유사한 문제를 겪는 개발자들에게 실질적인 도움을 제공하고자 합니다.
BFFGraphQL카카오페이지
카카오엔터테인먼트FE·2023년 9월 25일
Frontend
마법소녀 이세계 아이돌 웹툰 런칭! BFF 장애 대응기
카카오페이지에서 유명 버추얼 아이돌 그룹 이세계 아이돌의 웹툰 런칭 당시 발생했던 BFF 서버 CPU 100% 장애의 원인과 해결 과정을 공유하는 글입니다. BFF는 백엔드 API를 호출하고 응답을 가공하여 클라이언트에 전달하는 역할을 하는데, 갑작스러운 트래픽 증가로 인해 성능 저하가 발생했습니다. 필자는 문제 해결을 위해 다양한 가설을 세우고, 구성도를 설명하며 원인을 추적했습니다. 이 글은 유사한 문제를 겪는 개발자들에게 도움이 될 수 있는 해결책과 문제 해결 과정에서 얻은 팁을 제공합니다.
BFFGraphQL카카오페이지
카카오엔터테인먼트FE·2023년 9월 25일
Frontend
BackstopJS 적용 후기 (Visual Regression Test)
카카오엔터테인먼트 스토리 FE팀에서 BackstopJS를 6개월간 적용한 후기 및 활용 사례를 소개합니다. BackstopJS는 헤드리스 브라우저를 통해 실제 서비스 페이지 단위의 시각적 회귀 테스트를 수행합니다. 프로젝트에서 Atomic 디자인 시스템을 활용하고 있어, 기획 변경 시 UI가 크게 바뀌는 Organism 단위로 스토리북 테스트를 구축했습니다. 이를 통해 새로운 Organism 스토리북 작성 시 BackstopJS 시나리오에 스토리북 URL을 추가하여 테스트를 자동화했습니다. 테스트 시나리오가 많아짐에 따라 `createBackstoScenario.js` 스크립트를 별도로 생성하여 효율성을 높였습니다. 이 글은 BackstopJS 적용 경험과 함께 시각적 회귀 테스트의 이점을 공유합니다.
BackstopJSVisual Regression TestVRT
카카오엔터테인먼트FE·2023년 9월 1일
Frontend
BackstopJS 적용 후기 (Visual Regression Test)
이 글은 카카오엔터테인먼트 스토리 FE팀에서 BackstopJS를 6개월간 적용하며 얻은 경험과 인사이트를 공유합니다. BackstopJS는 헤드리스 브라우저를 통해 실제 서비스 페이지의 시각적 회귀 테스트를 자동화하는 도구입니다. 팀은 실제 서비스 페이지 대신 스토리북의 빌드 결과물을 기반으로 BackstopJS를 구축하여 안정성을 높였습니다. 특히 Atomic 디자인 시스템의 Organism 단위 컴포넌트 테스트에 집중하여, 기획 변경 시 UI가 크게 바뀌는 부분에 대한 테스트 효율성을 극대화했습니다. 이를 위해 `createBackstoScenario.js`와 같은 스크립트를 활용하여 테스트 시나리오 관리를 자동화하고, 시각적 회귀 테스트의 실질적인 이점을 소개합니다.
BackstopJSVisual Regression TestVRT
카카오엔터테인먼트FE·2023년 9월 1일
Frontend
사파리, 모바일 환경에서의 트러블슈팅
이 글은 사파리 및 모바일 환경에서 발생하는 웹 개발 이슈와 그 해결책을 다룹니다. PC 크롬 브라우저에서는 문제가 없지만 사파리나 모바일 환경에서 다르게 동작하는 경우를 집중적으로 조명합니다. 특히 스크롤 내부 요소가 삭제될 때 발생하는 스크롤 위치 이슈를 예시 코드와 함께 설명하며, 이러한 이슈의 배경과 해결 방안을 제시합니다. 개발자들이 흔히 겪는 크로스 브라우징 문제를 이해하고 해결하는 데 도움을 주는 것을 목표로 합니다.
Safari모바일크로스 브라우징
카카오엔터테인먼트FE·2023년 7월 20일