iOS 앱 이미지 에디터 개발기 / if(kakaoAI)2024
if kakao 카카오 · YouTube
AI 핵심 요약
브런치와 티스토리 iOS 앱의 기존 이미지 편집 기능이 웹보다 부족해, 회전·반전·자르기와 스티커·테두리 등을 지원하는 이미지 에디터를 개발했다. 필터 처리는 Metal의 텍스처와 렌더 파이프라인을 활용하고, 편집 상태는 구조체로 관리했으며, 레이어 뷰와 이미지 기준·프레임 기준의 프리뷰 계층을 나눠 여러 편집이 함께 적용될 때의 표시 문제를 해결했다. 특히 회전된 이미지에 스티커를 추가하거나 자르기 영역에 맞춰 테두리를 표시하는 과정에서 기능 간 좌표와 변환 관계를 조정해야 했다. 후반에 드러난 상호작용 문제가 일정 지연으로 이어진 경험을 통해, 수정 범위가 큰 작업을 일찍 검토하고 기능을 통합한 상태로 반복 검증하는 것이 중요하다고 정리했다.
- 이미지 편집 상태를 하나의 구조체로 모으면 기능별 데이터를 일관되게 관리할 수 있다.
- Metal에서는 이미지를 텍스처로 변환한 뒤 버텍스·래스터라이즈·프래그먼트 단계를 거쳐 GPU에서 픽셀을 처리한다.
- 회전과 자르기를 함께 다룰 때는 바운즈, 콘텐츠 오프셋, 줌 배율을 함께 계산하고 중심점이 유지되는지 확인해야 한다.
- 편집 기능을 이미지 기준과 프레임 기준으로 나누고 레이어 계층을 구성하면 자르기·스티커·테두리의 표시 규칙을 분리하기 쉽다.
- 기능을 나눠 구현하더라도 검증 가능한 전체 흐름을 작은 단위로 완성해 반복 테스트해야 후반의 큰 수정 위험을 줄일 수 있다.
소개
브런치, 티스토리에 적용된 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
3년차 개발자, 10년차 에디터 모던화 하기 in Android / if(kakaoAI)2024
컨퍼런스 if kakao
10년된 브런치 안드로이드 에디터를 3년차 개발자가 모던화 하기까지의 과정의 개발 경험기 입니다. 10년전에 만들어진 리치 텍스트 에디터를 Compose, MVI, 클린아키텍쳐를 적용하여 모던화 하는 프로젝트를 발제하고, POC 를 통해서 점진적으로 개선하는 과정을 공유합니다. #android #editor #compose #modernization #리팩토링 브런치개발파트에서 브런치와 티스토리 안드로이드 앱 개발을 담당하고 있는 Evan입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-52 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
AI 기반 광고 콘텐츠 모니터링 기술 개발기 / if(kakaoAI)2024
컨퍼런스 if kakao
부적절한 광고소재 콘텐츠의 모니터링을 위해 사용한 이미지-텍스트 유사도 도출 모델의 소개와 학습 과정, 이를 고도화하기 위한 기술 개발 과정과, 기반 기술을 활용한 응용 사례를 소개합니다. #AI #광고소재필터링 #MultiModal Adaptive AI에서 다양한 인공지능 모델들을 학습하고 개발하는 Queue입니다! 최근에는 다양한 멀티모달 모델들에 대한 학습을 진행하고 있습니다! 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-33 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
딥러닝 · 머신러닝 컴퓨터 비전
컨퍼런스 if kakao
사진편집기! 이것DOM 적용해볼GL? / if(kakao)2022
컨퍼런스 if kakao
새로운 사진편집기에 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
모바일 얼굴인식 SDK 개발 / if(kakao)2022
컨퍼런스 if kakao
딥러닝 기반의 얼굴인식 모델을 처리 성능이 빈약한 모바일 및 전용장비에 적용하기 위한 최적화 방법에 대해서 공유하고자 합니다. #FacialRecognition 카카오엔터프라이즈 비전인텔리전스팀의 앤드루와 포입니다. 얼굴인식을 모바일에 적용하는 일을 하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-68 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
딥러닝 · 머신러닝 컴퓨터 비전