우아콘 2023 후기 by 3년차 프론트엔드 개발자

11월 15일에 개최했던 2023 우아콘을 다녀왔다.

코로나 이전 다녀왔던 2020년 1월 GDG 이후 첫 컨퍼런스였고

기술에 진심인 우아한 형제들의 개발자들의 생각과 개발에 대한 애정을 배울 수 있기에 단박에 신청을 했고 나는 단박에 떨어지고 내 동생이 단박에 붙었다. 나는 김동원이 아닌 김민지로 참석을 하게 되었다.

 

 

개발자지만 내가 아닌 팻말을 메고 있다해서 큰 이슈는 없었지만 상품받을 때 약간의 착오가 있어 내 상품을 못 탈뻔했다 ㅎㅎ

 

나는 행사시작 한시간 전에 방문을 했고 미리 어떤 발표들이 있는지 살펴보았다.

https://woowacon.com/presentations

WOOWACON 2023

 

아래 링크로 세션을 참고하시면 좋겠고

나는 오프닝 키노트부터

 

• 오프닝 키노트 10:00 ~ 10:40
• 프론트엔드 개발의 미래, Module Federation의 적용 11:00 ~ 11:40
• 점심식사 🥗
• GPT(a.k.a 뚝딱이)와 함께하는 서비스 만들기 14:00 ~ 14:40
• 디자인 시스템이 주니어에게 가져다 준 변화 15:50 ~ 16:15
• 배민 레거시 16:35 ~ 17:15
• 우아한형제들만을 위한 브라우저 확장 프로그램 17:30 ~ 18:10

이렇게 듣기 위한 계획을 짰다.

사실 미리 공부를 해보고 질문을 준비해보고 싶었으나 샌드위치를 사러 40분 여행을 다녀오는 통에 준비하지 못했다.

 

그렇게 착석을 하고 우아콘이 시작되었다.

2d320f97-1810-47ff-bae5-8cd51a8e3cae.mp4

4.88MB

 

행사 오프닝 영상이었다. 그리고 CEO, CTO님이 나오셔서 발표를 하는데 굉장히 큰 규모의 발표가 진행이 되고 흡사 애플 WWDC를 보는 듯한 멋진 광경이 보여졌다.

 

내용을 간단히 정리하면

오프닝 키노트

by 이국환 ceo

 

우리는 오늘 기술적인 성과와 지식 노하우를 공유할 생각.

우리는 기술, 일하는 방식 최적화에 힘을 주고 있음

자율주행배달로봇 딜리 힘주고 있음

 

우리 블로그는 대단한 성과가 아닌 고민한 흔적을 남기는 공간으로 남기고 있고 외부에 꾸준히 공유중

이정도의 내용으로 정리를 하고

 

배달의 민족은 사람과 맞닿는 순간을 고민합니다

by 송재하 cto

 

badal science - 슬로건

우아한 공방 - 젤 기대됨

우아한 웹 툴킷

등 다양한 시행착오를 거치며 고민한 결과를 공유할 거임.

 

다양한 플랫폼을 확장할 때 보안이 가장 중요하므로 우리는 보안에도 신경써서 나아가고 있다.

 

다양한 내용들이 있었지만 나는 이정도만 듣고 다음 세션으로 넘어갔다.

 

그리고 첫 세션인

Module Federation의 적용

배민커머스웹프론트개발팀의 박세문님의 발표로 시작을 하였다.

 

(마이크가 켜지지 않아서 큰 목소리를 발표하셨는데 현장감의 재미가 느껴지는 순간이었다. ㅎㅎ)

 

요즘 유행하는 마이크로 프론트엔드에 대해서 Module Federation의 시도한 점을 공유해주셨다. 내가 좋아하는 왜 시작되었는지 history 부터 발표를 시작해주셔서 재미있게 듣게 되었고 현 회사에서 겪고 있는 문제를 배민에서도 겪고 있다는 점에서 회사에 대해 뽕이 차오르는 순간이 있었다. 발표 내용을 간단히 정리해보면

 

마이크로 프론트엔드란?

 

fe와 be의 문제점은 항상 존재했음

be의 발전으로 microservices가 됨 ⇒ 독립된 바운더리로 서비스가 분리됨 ⇒ 프론트엔드도 컴포넌트가 도입되면서 재사용성, 가용성, 발전 ⇒ fe도 복잡성이 추가되고 micro 서비스가 필요해짐

우형에서는 왜 마이크로 fe가 필요함?

전시영역 관리 어드민이 있음 ⇒ 여러개의 어드민으로 나뉘어서 관리, 관리 측면에서 각각의 어드민에 접속

엘란 코나와 같은 어드민 시스템을 사용하고 있음

 

상태관리는?

설계,비용,시간을 고려해서 기술 채용 기준을 가짐

https://maxkim-j.github.io/posts/module-federation-concepts/

마이크로 프론테엔드 아키텍쳐 선택

외부의 컴포넌트를 import 하는 게 시작 ⇒ module federation ⇒ 웹 퍼플리케이션 개발에서의 코드공유 ⇒ 코드를 배포 가능한 작은 모듈로 분리. 분리된 모듈을 동적으로 로드

• expose option (save)
• remote option (load)

보안위험이 있어 꼭 보안조치가 필요함

문제점과 해결방법

• 타입스크립트 지원문제

remote module 은 js임

⇒ type definition을 가져오자

⇒ federated types란 npm 모듈이 잇음.

• 번들러에 대한 이해
• 비동기 의존성

dependency로드를 component 로드전에 진행하기. moduleFederationPlugin의 eager 옵션을 true로 켜줌

• 빈번한 버전 업데이트

질문

• 공통화 할 때 디자인 요소는 제거 하였는가 => 디자인 요소는 가져가고 디자인팀과 개발팀의 협의를 실장님 급에서 해결하여 통일하는 방안으로 진행중

얻은것

• 공통화된 프로덕트
• 예측가능한 리스크 범위
• 비즈니스, 기술적인 욕구 모두 충족

느낀 점

• 엔카의 기술력이 우형에 밀리지 않는다. 다만 좀 더 보안하고 활용도 높게 사용중.
• 코나 엘란과 같은 어드민 페이지를 사용하고 있다.
• 디자인 시스템을 웹으로 띄워서 다양한 도메인에서 사용중.

 

개인적으로 발표 내용으로는 가장 좋은 발표라는 생각이 들었다. 위는 현장에서 필기한 내용으로 추후에 영상이 공개되면 한번더 시청하고 조금 더 정리해볼 의향이 있다. Module Federation이라는 번들을 조합하는 새로운 방식에 대해 공부해 볼 수 있었다.

 

점심 약속이 있어 하나의 세션은 패스하였다. 나쁘지 않은 선택이라고 생각한다 ㅎㅎ.. (죄송해요 중간 세션 준비자 여러분)

 

비싼 코엑스 점심을 먹고 커피를 가지고 왔는데 럭키드로우를 진행중이었다. 나는 가장 좋은 상품인 개발자 키트를 받았다.

 

구성은 블루투스키보드, 미니 캐리어백, 무선충전기, 노트북 거치대였고 대략적으로 5만원 이상의 상품으로 구성되어 있어서 너무 좋았다. 

네트워킹 실로 가보니 그전에 발표를 해주셨던 세문님이 계셨고 i지만 용감하게 용기를 내어 스몰톡을 하였고 20분 정도 질의응답을 하며 시간을 보냈다.

 

• 현재 고민중인 pnpm + vite + 낮은 node version + storybook 이 문제를 경험하고 있는데 혹시 이 스펙들을 우형에서도 사용하고 있는지
• 디자인 가이드를 하실 때 매번 다른 디자인 요소에 고통받고 있는지는 않은지? 또 어떻게 해결할 생각인지
• 요즘 채용 추세는 어떤지 => 코딩테스트의 중요도가 다시 올라오고 있다는 무서운 소식 => 본인도 다시 입사해야한다면 현재 기준이 까다로워 입사 여부가 불투명하다고 하셨음

좋은 대화를 맞추고 오후 세션을 맞이했다.

 

오후 세션 경쟁이 치열했는데 나의 주요 관심사인 gpt 세션을 택했다. 개발자가 아닌 pm 분께서 발표를 하셨고 내가 만났던 문제사항을 그대로 마주쳐서 어떻게 해결했는지 계속 집중하며 들었다. 

 

GPT(a.k.a 뚝닥이)와 함께하는 서비스 만들기

2시

by 오혜진 pm님

 

Generative Pre-traind Transfomer

다양한 문제점들이 있었지만(헐루시네이션) 일단 서비스를 만들어보자!

내 상황에 맞춘 추천을 원할때

• 스트레스, 아이같은 키워드로 gpt가 추천해주는 시스템

다양한 테스트, gpt 결과물 검증 튜링테스트

에져를 이용하면 데이터 보안 이슈를 탈피할 수 잇음

자체 디비를 이용해서 프롬프트 엔지니어링으로 gpt 학습 시킴

이 부분이 넘 궁금하네

⇒ pm 이신 분이 발표하셨고 우리가 궁금했던 자체 디비 구성을 고민한 결과를 우리에게 알려주었다. 하지만 현재 그 부분은 포기했지 우리는..

자체 db를 어떻게 학습시키고 그 llm은 어떻게 운영되는 건지 궁금하다. 물어보고 싶엇으나 기회가 없었음

 

내가 궁금한 부분은 openai api를 사용했을 때 회사 코드가 유출되는 이슈를 막고 싶었다. 우형에서는 ms의 azure를 활용하여 openai로 데이터가 넘어가지 않는 다는 점을 확인하고 정책적으로 확정한 뒤 서비스를 오픈하셨다. 우리도 이렇게 해결하면 좋지 않을까 싶다. 회사 동료인 영훈님과 bitbucket용 코드리뷰 gpt를 개발중인데 현재 이 정책을 찾지 못하여서 막힌 상태였다. 이를 해결하면 추가 개발이 가능할듯하다.

 

코멘트로 뚝닥이가 음식 추천 서비스로 개발된 것은 아쉽다. 추천서비스가 워낙 많기에 조금 더 다양한 활용도를 기대했는데.. 더 많은 활용도로 뚝닥이가 사용되면 좋을것 같다.

 

이후 하나의 세션을 건너뛰었다. 너무 빡세게 발표를 듣고 계속 발표장을 옮기다 보니 체력소모가 극심해서.. 좀 쉬고 할일을 좀 하고 언박싱도 하며 시간을 보냈다. 그리고 그 다음 세션은...

 

디자인 시스템이 주니어에게 가져다 준 변화

by 권기석

 

더 많은 일을 효율적으로 가능하게 만드는

각기 다른 서비스에서 같은 컴포넌트 디자인을 사용하고 있음.

경험으로 느낀 포인트들

• 디자인 시스템 키워드
  • 컴포넌트 유연함
  • 비즈니스 로직을 충족시킬 수 없는 한계를 부딪힘
  • 요구사항을 모두 예측할 수 없다
• 약속된 통일된 규칙
  • 스타일을 확장할 수 있게 지원
  • 확장의 자유로 나타날 수 있는 문제
    • 장점
      • 2번의 스타일변경으로 초기 구현된 컴포넌트와 전혀다른 컴포넌트로 확장됨
      • 필요한 것을 빠르게 적용, 자유롭게 디자인 시스템의 관리 리소스 적음
    • 단점
      • 디자인 시스템 파편화 가능성
      • 사이드이펙트 파악으 어려움
  • 확장의 제약
    • 장점
      • 관리주체 명확
      • 트렌드를 빠르게 반영
      • 사용자 경험의 일관성
    • 단점
      • 디자인 시스템 관리비용
      • 비교적 자유롭지 못한 사용자
  시스템 : 구성 요소들이 상호작용하거나 상호의존하여 복잡하게 얽힌 상호 디자인 덩어리피그마에서 용어를 기반으로 통일하고 거기서만 사용함
• 디자인 시스템 예시 : 어도비 stpectrum, 우버 base web, 마소 fluent2, ant design

말이 정말 빠르셨고 혀가 짧으셔서 이해하기 좀 어려웟다.. ㅎㅎ 디자인 시스템 개발하며 다각도로 고민한 점에 대해 이야기한 주제였고 팀원들에게 공유하면 좋을 내용이라고 생각이 들었다.

 

다음은 배민 레거시.

이 세션은 사실 세션 제목에 어그로가 많이 끌렸다. 내가 예상한 내용과 전혀 달라 중간까지 내용파악이 어려웠다.

 

배민 레거시

by 송요창님 배민우리동네팀

송파구에서만 사용가능하고 동네의 정보를 알려줌

mvp 2달만에 릴리즈 성공

사장님들을 위한 무료서비스라 잘 될줄 알앗으나 생각보다 전화영업이 안됨.

핫픽스!!

• 이미지가 깨짐
  • 많은 이미지를 한번에 로딩, ios 웹뷰는 bg에서 다운받고 잇는 이미지를 상세로 갈 경우 다운로드 정지함
    • 이미지 3개로 제한
• 이미지가 업로드 되지 않음
  • 클라우드프론트⇒ api 게이트웨이 ⇒ 람다 업로드
    • 우리는 람다를 제어해야함 ⇒ 람다에 이미지가 도착하지 않음
    • 큰이미지 업로드를 작은 이미지로 변경하자 ⇒ 이미지 사이즈 줄일 툴이 다양햇음
    • 러스트 + chatgpt로 해결해서 이미지를 줄임

배민 경력직

• 평균 근속 3.2년
• 개발과 관련한 사항에 익숙함, 최근 it회사의 근속 주기가 2년이 안됨

언론의 관심

서비스가 나오자마자 기사가 됨

이미지 플랫폼

s3 만들고 클라우드 프론트 붙이고 전달함⇒ 보통은 2번함 다만 aws 안써보면 어려움

배포도구

fe 코드는 빌드된 파일을 s3에 올림 하지만 배포도구가 되어잇어서 클릭 몇번이면 서비스가 올라감 be 까지하면 생각해야될것들이 너무 많음. ⇒ 까나리 배포로 부분 배포도 가능함

배민 앱

mau가 190만+

기존 인증 로직이 편함

리뷰 플랫폼

다양한 기능 제공함 ⇒ 쉽게 붙일 수 있엇음

 

 

우리동네 서비스 개발에 대한 후기였다.

 

 

그리고 대망의 마지막 세션인

우아한 형제들을 위한 브라우저 확장 프로그램

발표자는 장해민님이었는데 이 분은 예전부터 알고 있었다. 내 블로그 조회수의 일등공신인 우테캠 출신이신데 내가 지원한 기수의 전 기수 에이스 분이셨다. 우테캠 전형 준비할 때 해민님 이름을 많이 들었고 실제로 보고 싶었고 이야기도 해보고 싶었다. 발표가 시작되고 개인적으로는 충격적인 개발 결과들을 공유해주셨다.

 

우아한 형제들을 위한 브라우저 확장 프로그램

by 장해민님

locatorJS, authticator 확장프로그램

웹 툴킷 pin을 하는 기능

사이드바가 느리게 로드 되는 이슈 만남

이를 로컬 스토리지에 캐싱해둠 ⇒ 10배 이상의 속도 개선을 함

⇒ 여기서 만족하기 아까움

스티키스크롤, 페이지 fuzzy 검색, 페이지 북마크, 토글 단축키, 현재 페이지에 해당되는 항목으로 자동 포커스, 정교한 drag&drop 크기 조절, 여닫은 페이지트리 유지, 수동 리프레시

tenstack query

manifest.json은 익스텐션의 기본정보를 가지고 잇음 package.json과 비슷함

파폭용 익스텐션 만드는 데 크게 어렵지 않음

1. manifest 조작하고
2. moz api 익스텐션 변조해서 성공

익스텐션 많아도 컴퓨터가 느려지거나 하는 이슈는 없음. 따로 동작하기에

쉬운다운로드와 자동 업데이트

역시 장해민님은 천상 연예인 개발자다. 충만이형과 닮은듯하나(개발고수상) 좀더 연예인적 요소가 많다. 개발을 잘하는 것은 확실하고 불필요한 것에 대한 정의를 통해 더 나은 생산성을 이뤄냈다.

 

내용이 너무 좋았고 불편함을 느끼고 이를 개선하는 과정과 해결방법이 너무 좋았다. 같은 연차인 개발자가 이렇게 슈퍼 개발자가 되가는 과정에 자극을 많이 받았다.

 

 

총평

세상에는 잘하는 사람이 많고 내가 좋은 개발자가 되기 위해선 더욱 많은 노력이 필요하고 좀 더 개발에 진심이 되어야겠다. 나만의 잘하는 분야를 만들어서 전문성을 키우자