사진편집기! 이것DOM 적용해볼GL? / if(kakao)2022
if kakao 카카오 · YouTube
AI 핵심 요약
기존 사진 편집기의 이미지 처리 API를 대체하기 위해 WebGL을 적용하고, 이미지 크기별 처리 시간을 비교해 대부분의 테스트 크기에서 WebGL이 더 빠른 것을 확인했습니다. 이를 바탕으로 필터와 모자이크·블러 기능을 구현했으며, 모자이크 개수 제한을 없애고 블러 강도 조절도 추가했습니다. 스티커·텍스트 같은 아이템은 DOM으로 구현하되, React 기반 데코레이터에 공통 제어 로직과 핸들러를 모아 코드 및 상태 관리 중복을 줄였습니다. 다만 최종 결과물을 캔버스로 만들 때 DOM 아이템을 변환해야 했고, 자르기·회전 과정의 CSS 레이어 변경으로 좌표가 어긋나는 문제는 원본 이미지 기준의 좌표 변환으로 해결했습니다.
- 이미지 처리 작업은 작은 입력에서의 오버헤드까지 포함해 실제 사용 크기별로 비교해야 합니다.
- WebGL에서는 버텍스 셰이더가 좌표를 변환하고 프래그먼트 셰이더가 픽셀 색상을 결정합니다.
- DOM 아이템의 공통 동작과 핸들러를 데코레이터로 모으면 중복 코드를 줄이고 새 아이템을 빠르게 추가할 수 있습니다.
- DOM과 캔버스를 함께 쓰면 최종 이미지 생성 시 좌표·회전·텍스트 스타일을 캔버스 표현에 맞게 변환해야 합니다.
- 레이어 구조가 바뀌어도 좌표 기준이 흔들리지 않도록 원본 이미지 기준으로 계산하고, 변환 결과를 상태에 저장해 반복 연산을 피합니다.
소개
새로운 사진편집기에 WebGL을 적용하고, 공용 컴포넌트를 개발하면서 마주했던 선택과 문제 해결과정을 공유합니다. #WebGL 더 멋진 카카오의 에디터를 위해 노력합니다. 카카오 FE플랫폼팀 스카이입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-79 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
비슷한 학습 자료
컨퍼런스 if kakao
iOS 앱 이미지 에디터 개발기 / if(kakaoAI)2024
컨퍼런스 if kakao
브런치, 티스토리에 적용된 iOS 이미지 에디터 개발 과정을 소개하고, 그 과정에서 겪은 어려움을 공유합니다. 특히 회전, 반전, 자르기 등을 지원하는 상황에서 여러 편집이 적용된 이미지를 처리하는 방법을 중점적으로 다룹니다. #ios #image editor #2D computer graphics 브런치, 티스토리 iOS 앱을 개발하고 있는 Woongs입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-51 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
모바일 앱 개발
컨퍼런스 if kakao
관심과 우선순위를 받기 어려운 처지에 놓인 UX 관련 과제를 시작시키기부터 성공적으로 적용하는 데까지 직면했던 여러 문제들과 이를 극복해오면서 배운 경험을 공유하고자 합니다. #FE #UX #일하는 방식 카카오 FE플랫폼팀에서 티스토리 서비스를 담당하고 있는 Jordan입니다. 카카오 FE플랫폼팀에서 카페 서비스를 담당하고 있는 Leah입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-36 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
UI/UX
컨퍼런스 if kakao
선물하기 프론트엔드 성능 개선기 / if(kakaoAI)2024
컨퍼런스 if kakao
선물하기 프론트엔드 성능을 개선하면서 고민 했던 것들 그리고 적용한 기술들에 대해 공유하고자 합니다. #front-end #angular #웹 성능 선물하기 서비스에서 프론트엔드 개발을 하고 있는 Fleek입니다. 유저에게 더 나은 서비스 경험을 선사하기 위해 늘 노력합니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-35 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
웹 개발 프론트엔드
컨퍼런스 if kakao
Media 가속기를 통해 저지연 멀티스트림 트랜스코딩을 달성하고 실시간 스트리밍하는 사례를 공유합니다. AI 가속기를 통해 영상에 Vision AI를 적용하여 스트리밍하는 방법을 소개합니다. #ML #Vison #Cloud #Video Streaming 카카오엔터프라이즈에서 Vision AI 관련 서비스를 개발하고 있는 Mjkim입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-21 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
컴퓨터 비전 클라우드
컨퍼런스 if kakao
카카오의 대표 서비스인 카카오맵! 카카오맵은 비주얼 컴퓨팅 기술을 이용하여, 지도를 좀 더 빠르고 정확하게 그리고 효율적으로 만들기 위한 연구를 진행하고 있습니다. 이번 발표에서는 고정밀지도와 AR지도의 근간이 되는 'Spatial Connection Map(SCM)'의 진행 상황과 발전된 내용에 대해 발표하고자 합니다. #카카오맵 #비주얼컴퓨팅 #컴퓨터비전 #Spatial Connection Map 카카오의 비주얼컴퓨팅을 담당하고 있는 Thomas입니다. 카카오맵 발전을 위한 기술 개발을 진행하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-6 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
컴퓨터 비전
컨퍼런스 if kakao
카카오페이의 프론트엔드 서비스가 제공되는 환경에 대해 이야기 하고, 프론트엔드 서비스가 제공되는 환경의 관점에서 개발자 경험과 사용자 경험을 개선하기 위한 카카오페이 프론트엔드 팀의 작업을 사례를 통해 이야기합니다. #UX 카카오페이 FE인프라TF TF장 에릭입니다. 카카오페이 FE 서비스의 근간을 이루는 다양한 환경에 대한 고민을 하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-83 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
웹 개발 프론트엔드