jgjgill
PostAboutRoad

2024 if kakao 후기

7 min read
if kakao thumbnail
if kakao 톡

추첨에 당첨되어 if kakao 컨퍼런스에 참여할 수 있었다..! 😆

올해 행사에서는?

if(kakao)는 카카오 그룹의 기술 비전을 공개하고 기술적 성취에 대해 개발자 커뮤니티와 함께 공유하는 카카오 대표 개발자 컨퍼런스입니다.

올해 if 카카오 주제는 AI 이다. 그래서 대부분의 행사 세션이 AI로 이루어졌다.

그래도 3일(22 ~ 24)의 행사 중 23일에는 9개의 프론트엔드 세션들이 구성되어 있었다.

컨퍼런스 출발

버스를 제공해주어서 출근길과 유사한 기분으로 행사장으로 향했다. 😇

if kakao 도착

행사장 도착

카카오 AI 캠퍼스의 첫 인상은 굉장히 시설이 좋았다.

(이래서 카카오인가..?)

if kakao 대기

사은품으로 가방과 스티커도 받을 수 있었다.

if kakao 사은품

오전 키노트

Kakao AI Native

카카오 AI 네이티브

Kakao AI Native - CTO Keynote

영상

오전에는 카카오 CTO분의 기조연설로 진행되었다.


네이티브 전략

모바일 네이티브 → 클라우드 네이티브 → AI 네이티브

카카오는 과거에도 '네이티브' 전략으로 기술 변화에 대응했다.

모바일 시대에는 '모바일 네이티브', 클라우드 시대에는 '클라우드 네이티브', 앞으로 맞이할 AI 시대에는 'AI 네이티브' 전략을 구성하고자 한다.

이러한 일련의 변화에 대처해온 흐름을 제시하면서 AI 기술을 통해 조직과 서비스의 근본적인 변화를 목표로 한다.

성숙도 레벨

AI 네이티브로의 체계적 전환을 위해 카카오 AI Native 성숙도 레벨’을 정의한다.

다음과 같은 성숙도 레벨로 AI를 정착시키는 전략을 소개한다.

AI 성숙도 레벨
  • 탐색: AI에 대한 지식과 경험 축적
  • 적용: AI를 기업 문화와 서비스에 적용
  • 혁신: 서비스 고도화, 일상의 큰 변화
  • 일상: 서비스 보편화

전체적인 청사진을 알아보면서 카카오가 어떻게 AI를 준비하는지 알 수 있었다.


구체적인 사례로 기억에 남는 도구로는 효율적인 코드 리뷰를 위한 '코드 버디' 라는 AI 도구였다.

사내에서도 코드레빗이라는 AI 코드 리뷰 도구를 사용한 경험이 있었다.

그래서 카카오에서 사용하는 코드 버디라는 도구는 어떻게 다를까 라는 호기심이 생겼다.

점심

밥도 맛있게 잘 먹었다. 😋

ai 카카오 점심

오후 세션

현장에서 기록한 내용으로 작성하여 잘못된 내용이 포함될 수도 있습니다.

오후에는 본격적으로 세션들이 진행되었다.

세션을 들으면서 인상 깊게 남았던 키워드와 문장 위주로 간략하게 내용을 남겨보고자 한다.


접근성 작업을 도와주는 ESlint plugin 개발기

ESLint 세션

접근성 작업을 도와주는 ESlint plugin 개발기


  • eslint-plugin-jsx-a11y을 통해 웹 접근성 작업을 진행하고자 함
  • 하지만 inline 태그 내부에는 inline만 와야 한다는 관련 규칙은 없었음
  • 나아가서 Emotion을 활용할 때 emotion/styled에서 활용할 때의 지원도 필요
  • 관련 플러그인 제작 및 확장해나감

우리 프로젝트에서는 Emotion과 유사한 CSS-in-JS 도구로 styled-components를 사용한다.

그래서 여유로울 때 세션에서 제공해준 코드를 기반으로 직접 우리 프로젝트에 맞게도 적용해볼 수도 있을 것 같다. 🧐


Node.js(Next.js) 애플리케이션 모니터링을 위한 메모리 인사이트

Node.js 세션

Node.js(Next.js) 애플리케이션 모니터링을 위한 메모리 인사이트


  • 메모리 릭이 의심스러운 지표 발견
    • 트래픽 증가와 상관없이 메모리 상황이 늘어난 상황
    • 데이터를 신뢰할 수 있을까? → 모니터링 도구 의심..
  • Node.js 메모리 구조와 데이터의 이해
    • prometheus, Natvice API
    • 메모리 관련 process.memoryUsage
      • rss, heapTotal, heapUsed, ...
  • 문제 해결: middleware가 만들어내는 객체 존재
    • 유저의 정보를 가지고 로그성 미들웨어, 굳이 서버에서 처리할 필요가 없는 로직
    • middleware 특성상 client에서 실행 가능
    • 코드를 client로 옮김

최근 프로젝트에서 Next.js의 서버를 제대로 활용하고 있는지 고민이 많은데 도움이 될 것 같아 집중해서 들었다.


해당 세션에서는 문제 해결 과정이 인상 깊었다.

굉장히 로우레벨로 Node.js의 깊숙한 부분까지 파고들어서 대단하다고 느꼈다.

'우리는 서버를 존중해줘야 한다.'라는 생각이 들기도 했다.


선물하기 프론트엔드 성능 개선기

선물하기 세션

선물하기 프론트엔드 성능 개선기


  • 이미지 최적화
    • 적절한 이미지 사이즈
    • WebP 포맷 변환, userAgent 대응
    • 지연 로딩
    • preconnect, fetchPriority
  • 폰트 포맷 최적화
    • woff 2.0으로 적용
  • 인덱스 html 특정 api 미리 호출
  • 디펜던시 중복 탐지 스크립트 개발 후 적용
  • 코드 스플리팅
  • ES6 전환 및 core-js 폴리픽 최적화
  • 큰 컴포넌트 지연로딩

세션 이후 질의응답에서 사용자 경험을 위해 SSR을 도입하지 않은 이유에 대한 질문이 나왔다.

  • 모든 것은 등가교환
  • 서버 비용, 복잡성 증가
  • CSR로도 충분히 성능을 낼 수 있다고 판단

모든 것은 등가교환이다. 😤

받는 게 있으면 내줘야 하는 것도 존재하는 법.

상황에 맞는 적절한 선택을 내리는게 중요하다는 생각을 다시 한 번 하게 되었다.


서비스 UX는 내가 직접 지킨다: 웹 이미지 뷰어 '포커스' 개발 및 적용기

포커스 세션

서비스 UX는 내가 직접 지킨다: 웹 이미지 뷰어 '포커스' 개발 및 적용기


  • 웹 이미지 뷰어 → Phocus 프로젝트
  • 배경
    • FE 조직 → 다양한 서비스 관리
    • 사용자 관점: 서로 다른 이미지 뷰어 → 일관성X, 디바이스별 대응X
    • 개발자 관점: 이슈 대응 어려움, 중복 + 유지보수
  • 해결하기, 서비스를 빛내는 요소들
    • 사용자 관점: 사용자에게 피드백 제공, 예측할 수 있게 만들기
    • 개발자 관점: 가상 슬라이드, 이미지 스케일링(핀치, 더블탭), 제스처 충돌, 개발자 경험
  • 회고
    • 사용자 관점: 인터랙션 디자인
    • 개발자 관점: 확장성
  • 악마는 디테일에 있다… → 이게 프론트엔드 개발자이지 않을까

사용자 관점, 개발자 관점으로 발표를 구성한 게 인상 깊었다.

세션을 들으면서도 악마는 디테일에 있다 말이 떠올랐다.

'이 부분이 프론트엔드의 중요한 역량 중 하나'라는 생각을 하게 되었다. 🧑‍🎨


웹 성능 게이트 키퍼: 웹 성능 모니터링 서비스, '파루스' 의 기술과 활용

파루스 세션

웹 성능 게이트 키퍼: 웹 성능 모니터링 서비스, '파루스' 의 기술과 활용


  • 파루스
    • 웹 성능의 중요성
    • 지속적인 체크 → 모니터링
      • Syntahetic Monitoring → 실험실 환경
        • 파루스는 여기에 해당!
      • Real User Monitoring → 실제 유저
  • 기능과 구조
    • URL 기반 대상 설정, 실험실 환경 설정, 커스텀 설정 제공
    • 단일 측정 분석, 점수 변화 그래프 제공
  • 주요 기술과 특징
    • 안정성
      • 1node-1pod-1job
      • 브라우저 선택과 버전 관리
      • chromium 활용
      • 에러 격리 - 측정 프로세스 분리 child process(?)
    • 신뢰성
      • 명확한 측정 방식과 평가 기준
        • simulated 비교, throttling
        • 5회 측정, 점수 평가 적절한 결과값 선정
    • 사용성
      • 기획 → 개발/검증(이때 활용할 수 있을까?) → 배포 → 모니터링
      • 파루스는 URL 기반로 동작, 측정 시점에 접근 가능한 URL이 필요
      • 이를 해결하기 위해 파루스 devtools 개발
      • 프록시 서버에 도메인 생성 요청, 생성 도메인 전달, ip 저장..
  • 활용 사례와 성과
    • 성능 개선 인식 강화, 활동 증가

대단하다는 생각만 든 세션이었다.. 😇

이게 카카오인가..


웹 카카오톡의 상태 관리: 바닐라 상태 관리 모듈과 리액트의 조화

웹 카카오톡 세션

웹 카카오톡의 상태 관리: 바닐라 상태 관리 모듈과 리액트의 조화


  • 웹 카카오톡에 대하여
    • 기획, 다지인이 없는 상황
    • 프로토타입 → 상태 ← 제품
    • 화면 구성을 제외하고 비즈니스 로직부터? → 이후 유연하게 대응하도록 만들자
    • 바닐라로 모듈 개발 진행
  • 웹톡의 상태관리 구조
    • 계층 구성
      • Provider, Logics…, StateEmitter, Application
    • 객체 관리의 부담
      • 객체 간 관계 형성
      • 복잡해지면 변경에 경직됨
      • 의존성 주입으로 해결 (데코레이터)
  • 리액트 밖의 로직을 연결하기
    • 바닐라 상태관리 모듈
    • tearing → useSyncExternalState
    • selector pattern
      • useSyncExternalStoreWithSelector

여기도 대단하다는 생각이 먼저 들었다. 🙃

필요한 것을 직접 구현할 수 있는 능력이 멋있었다.

주어진 문제 상황에 할 수 있는 최선을 다하는 점을 본받고 싶다.


마무리

약 5시간 동안 진행된 세션의 향연으로 돌아오는 버스에서는 바로 뻗었다.. 🫠

그래도 이런 오프라인 행사를 참여하면 항상 많은 자극을 받고 새로운 인사이트를 얻을 수 있게 된다.


좋은 컨퍼런스를 운영하기 위해 노력해주신 모든 분들께 감사의 말씀 남깁니다. 🙇‍♂️

@2023 powered by jgjgill