IF Kakao?💛🖤
서론
최근 Goorm X Kakao에서 진행하는 구름톤 UNIV 3기활동을 하고 있다. 주 활동은 단풍톤과 9UAP이다. 단풍톤이라고 함은, 쉽게 생각하면 해커톤을 한다고 생각하면 된다. 필자는 사실 해커톤을 하고 싶어서 찾던 도중 구름톤 UNIV를 알게 되었고, 현재 팀빌딩이 끝나 OnBoarding를 하고 있다.
그러던 도중 유니브 커뮤니티에서 한 공지가 올라왔다. 구름톤 유니브 중 If Kakao에 참석할 인원을 모집하는 공지였다. 필자는 개발 컨퍼런스 를 다니는 걸 좋아한다. 비록 이해가 되지 않더라도 들으면서 깨닫는 게 많다. 온라인으로 듣는 것보단 오프라인으로 직접 가서 서로 communication을 하는 게 훨씬 더 직관적이고, 많은 경험을 얻을 수 있다고 생각한다. 기회가 된다면 항상 개발 컨퍼런스 를 참여한다. 신청하면 떨어지는 게 문제지..
근데,,!!! 구름톤 유니브에서 If Kakao를 참여할 미르미를 모집한다는 것이다!! 필자는 주저하지 않고 바로 신청했다. If Kakao는 10월 22일(화) ~ 10월 24일(목)까지 진행하는데, 요일별로 focus가 다 다르다. 당연히 base는 AI지만, AI를 곁들인... Front라던지 back이라던지,,, 화요일은 AI / 수요일은 소프트웨어 개발 / 목요일은 DB & Cloud를 위주로 세션이 진행되었다. 필자는 현재 Frontend & Backend 즉, FullStack Developer를 하고 싶기 때문에 10월 23일(수)에 신청하였다.
참여확정🐰
필자는 운이 좋게도, 9월에 IF Kakao 참여 확정이 되었다. 완존 러키비키자나🍀 확정된 문자를,, 카카오톡을 통해 보내주셨는데,, 애석하게도.. 필자가 카톡을 나가버려서.. 현재 존재하지 않는다.. 대 카카오에서 보낸 문자를.. 아무 생각없이 삭제한 내 잘못이다..
본 행사는 코엑스에서 진행하는 게 아닌 카카오 AI 캠퍼스에서 진행하였다. 판교에 있는 카카오 건물이 아닌 용인 수지구에 있는 카카오 AI 캠퍼스이다. 교통이 좋지 않아, 카카오 측에서 버스를 대관했다. 8:40에 판교 & 수서에서 출발하는 버스가 있었고, 9:10부터는 일정 간격으로 순환 버스를 제공했다.
If Kakao Session 소개
다음 사진은 If Kakao 10월 23일(수) Day 2 세션이다. 이번 If Kakao는 모든 연결을 새롭게라는 주제로 컨퍼런스가 진행되었다. 오전 KeyNote에서는 Kakao AI 관련해서 전반적인 AI가 소개되었고, 이후 점심을 먹고 오후 Session 참여자가 원하는 Session을 들을 수 있다. 필자 같은 경우 오전에는 Keynote를 듣고 오후에는 Track 201에서 진행하는 FE파트를 들었다. 사실 오후에는 다른 Session도 듣고 싶었지만, 생각보다 사람이 많았고, 자리를 잡지 못하면 서서 들어야하는 상황이여서, 자리를 옮기지 못했다.
IF Kakao 시작📒
필자는 현재 하남 미사(미아 사거리 아님)에 살고 있다. 다행히도, 판교까지 바로가는 직행버스가 존재해서 판교까지 광역버스를 타고 가면 됐다.
8시 40분까지 판교역에 도착해야하기 때문에 7시에 집에서 나왔다!! 하지만,, (인생은 계획대로 되지 않는다지..) 분명히 7시 15분에 버스 정류장에 도착했지만, 생각보다 3000 기다리는 사람이 많았다. 기다리다가.. 버스가 왔지만, 결국 내 앞에 있는 사람까지만 버스를 탔고 필자는,, 다음 버스를 기다려야하는 상황이 되어버렸다. 심지어 네비상 1시간 정도 걸린다고 찍혀 있었지만,, 역시 출퇴근 시간의 교통체증을 생각하지 못했다. 7시반경에 버스를 탔지만, 야속하게도 9시 조금 넘어서 판교에 도착했다.
버스에서는 오들오들 떨면서 '아 늦었네 어떻게 하지..?라는 생각을 했지만, 생각해보니.. 9시 10분부터 판교 <-> 카카오 AI 캠퍼스간 순환버스가 존재해.. "그거 타고 카카오 AI 캠퍼스를 가야겠다." 라는 생각이 들었다. 버스를 내리자마자, 판교역 4번출구에 있는 판교역 서편에서 순환버스로 탑승하였고, 간단한 입증절차 이후에 순환 버스를 탑승하였다.
IF kakao 굿즈
버스에 탑승하자마자 IF Kakao 관계자가 굿즈를 나눠주었다. 굿즈는 에코백 / 스티커 / 입장팔찌가 있었다. 역시 요새는 reuseable이 대세!! 나중에 알았지만 저 팔찌 끝에는 식권이 있었다.. ㅋㅋㅋㅋ 것도 모르고 식권 부분에 테이프를 붙여서.. 나중에 점심먹을 때 팔찌 때느라 힘들었다.. 아무 생각없이 팔찌 테이프로 연결했는데,, 나중에 관계자분이.. 팔찌에 식권있다고
Kakao AI 캠퍼스 도착🏢
버스에 내렸더니 예상보다 주변이 허허벌판이었다. 이런 곳에 카카오 AI 캠퍼스가 있다니 믿기 힘든 정도였다. 운영진 안내에 따라 AI 캠퍼스로 이동하였고, 언덕을 오르니 짜잔 나야 캠퍼스
출처 - 넷플릭스 흑백요리사 / 최강록님
카카오 AI 캠퍼스에 도착하니 굿즈로 받은 종이 팔찌로 출입을 확인하고 캠퍼스 내부로 들어갔다.
처음에는 아무것도 없는 허허벌판이라 이런 곳에 카카오 건물이 있나 싶었는데 막상 캠퍼스를 들어가니 너무 좋았다.
필자는 시골출신으로 학업 때문에 서울로 상경한 케이스이다. 유년 시절 자연과 벗대어 살아온 기억 때문에 서울에 빡빡하게 밀집되어 있는 건물 환경이 싫다. 뭔가 답답하다랄까? 초록파릇한 것들을 보고 자라서 그런 지 여전히 서울 life는 적응하기 힘들었다. 하지만 B U T 카카오 AI 캠퍼스는 자연과 조화롭게 어울려 있었다. 너무 너무너무너무너무 좋았다. 여기서 평생 코딩을 하고 싶을 정도였다. 카카오로 취업하고 싶다..
다음 장소는 Event Stage 크루 패널톡이 진행되는 장소인데, 이것만 봐도 자연과 어우러진 Kakao AI 캠퍼스임을 알 수 있다. 전날 살짝 비가와서 땅바닥이 젖어 있는 것을 볼 수 있다.
캠퍼스를 도착하면 누가봐도 나 오늘 If Kakao 여기서 진행돼~ 말하는 거 같았다. 사실 오기 전까지 실감이 안 났지만 캠퍼스에 도착하자마자 오.. 오늘 여기서 IF Kakao 하고 나는 참가자로 선정되어 왔네? 라는 생각이 들었다.
다시 한 번 IF Kakao에 참여할 수 있도록 해주신 구름 관계자분들과 IF Kakao를 준비해주신 Kakao 관계자분들께 감사드립니다.
Kakao AI 캠퍼스 내부
사진을 많이 찍었다고 생각했는데,, 생각보다 사진 찍은 게 없네..
B3F에는 Growing hall AI 관련 메인 행사를 진행하였다. IF Kakao(kakao AI) 라는 이름 답게 AI 관련 컨퍼런스는 B3F에서 진행했고, 오전 Session 또한 Growing hall에서 진행하였다. 쉽게 생각하면 메인 홀이라고 생각하면 된다. 여기서 메인 행사들이 진행되었다. 유튜브 실시간 스트리밍에서 보여진 장소가 Growing hall이다. 사진은 없지만 session 주변에 간식 또는 물이 구비 되어 있어서 너무나도 좋았다.
요새 느끼는 건데 developer 입장도 물론 중요하지만 절대적인 우선순위가 높은 user 입장이 훨씬 더 중요하다는 것이다. 이렇게 깔끔하고 한 눈에 Day2를 볼 수 있다는 게 너무나도 놀랍다. 엘리베이터 옆에 있으니 지나가면서 확인할 수 있어서 좋았다. 갓카오 킹카오 짱카오!
Kakao AI 캠퍼스 1층
1층 로비로 올라가면 안내 데스크와 함께.. 카카오 AI 캠퍼스 관련 굿즈..?를 판매 또는 전시하는 공간이 있다. 딴 건 몰라도.. 크록스는 좀 탐났다.. 365일 크록스를 신고 다니는 사람으로써, 크록스 굿즈를 사고 싶었지만,, 어떻게 사는 지 몰랐다.. 혹시,, 전시만 하는 것 일 수도 있어서,, 물어보지도 못하고.. 찐따 류지승 그리구 저걸 보면서 난 확실히 느꼈다. 내 디자인에는 재능이 없다는 사실.. 필자도 또한 프론트엔드 개발을 공부하면서 Figma를 다뤄본 적이 있다.. 진짜.. 내가 생각하기엔 깔끔한데 막상 최종 결과물을 보자면,, 너무 못생겼고 색 배합도 잘 맞지 않는다는 생각이 든다.. 근데 카카오 AI 굿즈 전시 쪽은,, 색감을 진짜 dramatic하게 잘 쓰는 거 같다.. 부럽다.. 나도 그런 디자인 재능이 있었으면 좋겠다..
Kakao 전시관..? 여긴 명칭이 뭐지? 🚀
다음은 별관..? 이라고 해야하나..? 카카오모빌리티 / 카카오엔터프라이즈 / 카카오헬스케어에서 사용하는 AI 기술과 서비스를 보여주는 공간이다. AI를 접목시킨 기술을 실제로 보니 신기했다. 특히, 카카오모빌리티의 자율주행이 인상깊었는데 재밌기도 하면서, 실제로 자율주행하는 모습을 모니 우와 진짜 저런 기술들이 실생활에서 상용화가 되고 있네? 라는 생각이 들었다.
오전 Session. Keynote💡
오전 Keynote는 총 세 개로 이루어졌다. 필자는 영어를 잘 하는 편이 아니다.. 그래서.. 세번째 세션인 Nvidia의 Ty McKercher의 강연을 제대로 듣지 못했다.. 죄송합니다 제 ability가 부족해서..요. 솔직히 말하자면 필기를 하면서 듣고 싶었지만, 진짜 kick한 부분이 있어서 오전 session은 필기를 하지 못했다.
Kakao Ai Native - 카카오 CTO 정규돈 gd.re
사진이 너무 커서 조금 줄였습니다..
여기서 너무나도 kick한 내용을 들어버렸다. 일단 먼저, CTO님의 강연 너무나도 인상적이었습니다. 감사합니다 강연해주셔서.
이 세션에 가장 키 포인트라 생각드는 건.. Code buddy이다.. 너무 좋아보인다. 나도 저거 쓰고 싶다는 생각 밖에 안 든다. 먼저 code buddy란, 카카오에서 만들 AI 코드리뷰 서비스로써, 그냥 git에 PR을 날리면 자동 comment로 코드 리뷰를 해주는 것이다. 개발자라면 실수하는 동물이란 걸.. 다들 아실꺼다. 변수명 하나 차이로도 엄청낭 디버깅을 해야할 때가 있다. 이럴때 code buddy는 자동으로 에러를 찾아주고 코드상 비효율적이라고 판단되면 이런식으로 고쳐야한다고 말해준다. chatgpt와 github action를 연동해서 git pr 날릴 때마다 코드 리뷰해주는 게 있다곤 들었는데,, setting할 줄 모른다.. 나중에 시간되면 chatgpt api를 이용하여 github 연동을해 pr 날릴 때마다 지피티가 알아서 코드 리뷰하는 걸 해보고 싶다.
code buddy를 들어버린 이후 필자 머리속에는 코드리뷰밖에 떠오르지가 않았다. 모든 개발자는 항상 의문을 가질 것이다. 과연 이렇게 짠 코드가 효율적인가?라는 의문을 근데 이걸 AI가 자동화로 코드 리뷰를 해준다..? 특히 사수없는 주니어 개발자한테는 너무나도 큰 도움이 될 거 같다. 필자는 이런 생각을 한다. 우리는 과연 지피티를 이길 수 있을까? 개발자라면 자고로 지피티를 이길 수 없을 것이다. 그러면 회사에서는 지피티를 통해서 코드를 작성하지 굳이 나라는 주니어 개발자를 채용할 이유가 없는 것이다.
치즈인더트랩 - 네이버웹툰
난 손민수하는 걸 좋아한다. 여기서 말하는 손민수란? 치즈인더트랩에서 나오는 주인공으로써, 다른 사람들의 라이프스타일이나 성격을 그대로 따라 하는 캐릭터다. 특히, 자신이 좋아하거나 닮고 싶은 사람의 스타일과 취향을 복제하는 성향이 있어 홍설이라는 여주와 복잡한 갈등을 겪는다. 이 특성 때문에 "손민수하다"라는 표현이 생겨났고, 이는 무언가를 그대로 따라 하려는 행위를 뜻하는 유행어로 사용되기도 했다. 안 좋게 보일수도 있지만, 나는 실제로 성공한 사람들의 라이프 스타일이나 성격을 따라한다. 물론 내것으로 바꾼채. 성공한 사람들의 특징이 있다. 성실하고 부지런하다 인간은 자고로 욕망이 있다. 필자 또한 성공이라는 욕망을 갖고 있는데, 성공하려면 성공한 사람을 손민수하면 된다. 그저 꺽이지 않고 꾸준히 노력하며 목표를 향해 정진하면 언젠가는 성공한 사람이 되지 않을까? 라는 생각을 한다.
갑자기 왜 손민수 얘기를 하냐고? 필자가 생각하기엔 현재 GPT는 능력있는 개발자이다. 나도 능력있는 개발자가 되려면 GPT를 손민수하면 되지 않을까?라는 생각이다. 끊임없이 GPT를 손민수하게 되면 결국 GPT와 비슷해질 것이고,, 나도 언젠간 능력있는 개발자가 될 것이라 믿는다. 그렇다고 해서 GPT를 의존해서 코드를 짠다는 게 아니다. 필자가 생각하기엔 GPT에 의존해서 코드를 작성하게 되면 머리속에 남는 게 많이 없다고 생각한다. 실제 코드를 작성하고 리뷰를 받는게 훨씬 더 머리 속에 남게 되더라.
갑자기 딴 길로 샜네요... 정말 진짜 나에게는 code buddy가 그만큼 큰 충격이였다.. 실제 카카오에 다니는 형한테 여쭤보니, pr만 날리면 알아서 리뷰해주는 게 생각보다 편리하다고 말씀해주셨다.. 나도 써볼래.. 위에서 말했다 시피 이미 code buddy에서 눈이 돌은 필자는 다음 세션에 제대로 집중을 할 수 없었다.. 자세한 내용을 알고싶다면 추후!! 유튜브에 올라오는 영상을 보는 것을 추천드립니다!!
점심시간🍔
사진이 왤케 크게 나오지..
오전 keynote가 끝나고 바로 점심식사를 진행하였다. 단체음식이란 필자가 생각하기엔 맛이 있진 않다고 생각한다. 몇백 아니 거의 천명이 가까이 되는 음식의 간을 맞추기가 쉽지만은 않기 때문이다. 근데 왠걸.. 카카오 도시락을 먹었는데 음식이 식었음에도 불구하고 그냥 모든 음식이 다 맛있었다. 진짜진짜 거짓말 안치고, 김밥과 닭강정 그리고 유부초밥은 호불호가 갈리지 않은 음식이면서도 배도 채울 수 있어 너무 좋았다. 음식 조리해주신 분들 덕분에 잘 먹었습니다. 감사합니다. 점심을 다 먹고 주변 산책을 하였다. 난 자연을 너무나도 좋아한다. 걷다보니.. 시간이 다되서 미리 Track 201에 도착하여 강연 들을 준비를 했다.
오후 Session. Track 201 FrontEnd
오후 session에는 Track 201에서 모든 강연을 들었다. 다른 session도 듣고 싶었지만, 201에서 진행했던 강연들이 나에게는 충분히 흥미로운 주제 + 도움이 될 만한 주제라고 생각해서 201에 주구장창 있었다. 다행히도 1시에 강연을 시작하는데, 12시 30분 경 미리 강연장에 가니 자리가 조금 여유가 있어서 편하게 들을 수 있었다.
TDD로 앞서가는 프론트엔드: 디자인 , API 없이도 개발을 시작하는 방법 - 김선호 | 카카오
TDD(Test-Driven Development)로써 test를 실패하도록 먼저 작성한 후 test가 성공하도록 기능 구현을 하고 이후 api와 마크업이 완성되면 리팩토링 하는 것을 의미한다. 프론트엔드 개발자라면 알 것이다. 만약 기획에서 요구사항 명세서가 나왔다고 가정해보자. 그럼 프론트엔드 개발자 같은 경우, 디자이너가 디자인을 진행하고, 퍼블리서가 markup langauage를 작성한다음, backend 개발자가 api를 만든 이후에야.. 프론트엔드 개발을 시작할 수 있다. 이는,, 요구사항 명세서가 나왔음에도 불구하고 프론트엔드 개발은 실질적으로 아무것도 하지 못한다는 얘기이다.
기획서 -> 일정산정 -> POC(Proof of Concept) 및 기술 검증 -> 프로젝트 문서 작성 -> 기술스택 논의 -> 페이즈에 따른 개발 환경 논의 -> 배포 방식 논의 -> github repository 생성 -> 개발 인프라 setting -> 공통 component, utils 생성
이런식으로 기획서를 전달 받은다음 이러한 일정을 짜도, 결국,, Markup & design & api가 없다면 프론트엔드는 아무것도 할 수가 없다.. 그래서 우리는 TDD를 이용하여 미리 프론트엔드 개발을 하고 있으면 개발시간을 엄청나게 줄일 수 있다. 먼저 디자인과 마크업 없이 프론트엔드 개발이다. 먼저 테스트 선택자를 이용하여 기능 구현을 먼저하고 화면 대신 테스트로 기능 요구 사항을 확인한 후 마크업 개발이 되었을 때, 선택자를 마크업 구조에 맞게 옮기면서 수정을 최소화할 수 있다. API 없이 프론트엔드 개발은 layer를 API, View Layer로만 나누는 게 아닌 API / ViewModel / View로 layer를 나누어 프론트엔드 개발자가 생각했던 API 형식이 아니여도 ViewModel로 데이터를 한 번 정제하기 때문에 API - VIEW 레이어 간 종속성이 떨어진다. ViewModel layer를 한 층 더 넣으므로써, API 개발 완료 시, viewModel 수정 및 API Mocking을 통하여 수정을 최소화할 수 있다.
항상,, 프론트엔드 개발은 결과물을 만들기위해 시간에 쫓긴다. 결국 디자인과 API 개발이 완료되어야 그 이후에 프론트엔드 개발을 할 수 있기 때문이다. 이 강연을 들으면서 새로운 접근법에 대해서 알게 되었고 다음에 기회가 된다면 이 방식을 적용하여 프로젝트 시간 단축을 하고 싶다.
선물하기 프론트엔드 성능 개선기 - 문지호 | 카카오
사실 개발이란 끝이 없다. 단순히 코드 딸각 기능이 정상적으로 동작(?)한다고 해서 끝나는 게 아니다. 수많은 리팩토링과 성능 최적화를 통해 사용자에게는 더 빠른 화면 로딩을, 회사에는 더 적은 비용으로 애플리케이션을 유지할 수 있도록 해야 한다. 해당 session은 선물하기 프론트엔드 성능을 개선하기 위해서 카카오는 어떤식으로 했는 지 설명한다.
1순위 이미지 최적화
2순위 폰트 포맷 최적화
3순위 index.html에서 특정 api 미리 호출
4순위 dependency 중복탐지 script 도입 후 결과
5순위 사내 라이브러리 코드 스플리팅 고도화
6순위 ES6 전호나 및 core-js polyfill 최적화
7순위 페이지 내 큰 컴포넌트 단위 지연로딩
확실히 Image & Font 같은 경우 최적화를 한 것과 하지 않은 것의 차이가 엄청나게 났다. 필자도 이제 코드를 작성할 때 이미지 최적화(webp & resize & lazy loading) 및 폰트 포맷(WOFF & WOFF2)을 신경써서 코드를 작성해야할 거 같다. 사실 나머지는 이미지와 폰트에 비해 상대적으로 최적화가 적다고 판단해서 필자가 생각하기엔 이미지와 폰트를 주 focus로 잡으면 좋을 듯 하다.
서비스 UX는 내가 직접 지킨다: 웹 이미지 뷰어 'phocus' 개발 및 적용기 - 송가람 ∙ 한상미 | 카카오
생각했던 거 보다 카카오에서 제공하는 웹 서비스가 많았다. 각기 다른 서비스에서 공통적으로 제공하는 게 있었는데 그게 바로 웹 이미지 뷰어이다. 근데 각 웹 이미지 뷰어는 서로 다른 라이브러리를 사용하거나, 제공할 수 있는 기능들이 달랐다. 이는 서비스 측면에서 보자면 필자처럼 처음보는 사람이 이 서비스가 카카오에서 제공하는 서비스인 지 모르고, 개발자 측면에서 보자면 a 라이브러리 내에서 에러가 발생하면 카카오에서는 즉각적으로 대응할 수 없었다. 그래서 사이드 프로젝트로써 카카오만의 웹 이미지 뷰어인 phocus**를 개발하게 되었다.
확실히 웹 이미지 뷰어 사소한 거 하나라도 서비스별로 다르다면 즉각 대응하기 힘들뿐더러 같은 회사내에서 제공하는 서비스인 지 인지하지 못했던 거 같다. phocus를 도입하면서 서비스가 다르더라도 카카오에서 제공하는 서비스인 지 확실하게 알 수 있어서 좋았던 거 같다.
웹 카카오톡의 상태 관리: 바닐라 상태 관리 모듈과 리액트의 조화 - 이기웅 | 카카오
도대체... 이미지 크기를 어떻게하면 설정할 수 있을까...?
사실 여기부분인 좀 많이 이해가 안됐다.. 뭐랄까?...? 아직 내가 범접할 수 없는 레벨이랄까? 최대한 집중하면서 들으려고 했지만 도저히.. 이해하기가.. 힘들었다.. 여전히 공부가 부족한 거 같다 좀 더 공부해서 youtube에 올라오면 다시 한 번 더 봐야겠다
후기
컨퍼런스를 다니면 항상 느끼는 게 있다. 강연이 이해가 안될지라도 영감을 떠오를 때가 많다. 특히 이번 컨퍼런스 또한 그렇다. AI, TDD, 웹 최적화, Web Image Viewer 강연을 들으면서 많이 배웠던 거 같다. 좋은 환경에서 강연을 들을 수 있다는 것도 나한테는 너무 좋았다. 나중에 먼 미래가 되면 반드시 파릇파릇한 공간에서 산적하게 쫓기지 않고 코드를 짜고 싶다. 이번 IF(kakao AI)2024를 준비하신 모든 관계자님, 그리고 IF Kakao에 참여할 수 있도록 해주신 구름 관계자님, 컨퍼런스 참여하신 모든 참여자분들 모두 고생하셨습니다.
