출처: https://uxgjs.tistory.com/102 [UX 공작소]
스퀘어랩 기술블로그 로고
Engineering

DEVIEW 2023 후기

조이|Mar 27, 2023

이 포스트는 입사 2주차(따끈따끈)의 백엔드 개발자가 DEVIEW 2023에 다녀온 후기에요. 현장 분위기와 제가 들었던 세션에 대한 약간의 설명을 담은 글이니 세션의 자세한 내용을 알고 싶은 분들은 DEVIEW 2023 공식홈페이지를 방문해주세요!

티켓팅을 성공하다!

사실 처음에는 DEVIEW라는 행사가 열리는지도 모르고 있었는데 주변 사람들이 데뷰 티켓팅을 해야 된다고 해서 그 때 데뷰를 처음 찾아보게 되었어요. 예전부터 취업하면 컨퍼런스 같은 개발자 행사들을 가보고 싶었기에 티켓팅에 도전하게 되었어요. 티켓팅하기 전만 해도 ‘이선좌’ 컬렉터인 제가 성공할 것이라고 생각하지 않았어서 큰 기대없이 했는데 결과는.. 성공했답니다! (이게 머선일이고..)

그렇게 저는 인생 첫 개발자 컨퍼런스에 가게 되었답니다!

ticket

북적북적한 현장

9시 50분부터 키노트 시작이었기 때문에 아침 일찍 지하철을 타고 DEVIEW가 열리는 코엑스로 향했어요. 2호선을 타고 갔기 때문에 코엑스 안 쪽으로 한참을 걸어 들어와서야 현수막을 찾을 수 있었어요. 도착하여 (뿌듯한) 예약 화면을 보여주고 데뷰 가방과 팔찌를 받고 입장했어요. 이른 시간이었지만 사람들은 벌써 꽤 많이 도착해있었어요.

로비에 놓여있던 빈백은 편해보여서(앉아본 다른 분이 편하다고..) 나중에 앉아봐야겠다고 생각하고 기업 부스 조금 돌아다니다오니 이미 만석이었어요😭

loby1 loby2

입장하자마자 기업 네트워킹 부스들이 있었고 이미 줄도 꽤 길게 서있어서 보이는 줄에 일단 섰어요. 그 부스는 네이버 검색팀 부스였고 네이버 검색팀 인재풀에 등록하면 룰렛을 돌릴 수 있는 기회가 주어졌어요.

경품은 텀블러, 우산, 스티커 등등 다양했는데 제일 받고 싶었던 텀블러가 당첨되었답니다!🫢 (이게 머선일이고..222)

gift1 gift2

이 외에도 열심히 다른 부스 돌아다니며 서비스 소개도 듣고, 사진에는 없지만 스티커도 모았어요!(스티커의 용도는 다들 아실거라 생각해요ㅎㅎ)

그렇게 입장하고 정신없이 기업 부스들을 돌아다니다가 키노트 입장시간을 잊어버려서 중간부터 들었어요.

keynote

키노트에서는 HyperClovaX 등 AI와 관련된 내용이 주를 이뤘고 각 세종 데이터센터에 관한 이야기도 해주셨어요.

세션

session1 session2

네이버 검색은 어떻게 나보다 더 내 의도를 잘 아는가? : AiRSearch 반응형 추천

네이버를 실제로 사용하면서 어느 순간부터 어떤 상품을 보고 나면 관련 상품을 바로 밑에 추천해주는 것을 봤고, 추천 목록에 떠있는 상품들을 종종 클릭하여 구경하고 구매까지 이어진 경우도 꽤 있었기에 위 세션을 듣게 되었어요.

네이버 검색팀에서 반응형 문제를 풀기 위해 아래 3가지 방법을 사용했다고 해요.

  • Intent Query
    • 클릭한 문서의 제목에서 핵심 의도를 표현하는 키워드를 찾는 모델
    • 검색어(Q1)와 클릭한 문서(D1)을 모델에 넣었을 때 사용자의 의도를 잘 표현할 수 있는 키워드와 스코어 반환
    • 이후 다시 검색한 검색어(Q2)가 위에서 반환된 키워드와 많이 일치할수록 Positive, 덜 일치할수록 Negative를 부여하고, 의도를 벗어난 Q2는 예외처리하여 학습데이터 구축
  • Intent Walker
    • 검색어, 키워드, 사용자의 세션ID, 클릭한 문서로 구축한 그래프 기반의 추천 모델
      • 유저가 클릭한 문서를 시작으로 랜덤 워크 수행
      • 유저가 클릭한 문서를 시작으로 Label Propagation 수행
      • (검색어 - 클릭문서), (세션 ID - 클릭문서) 등을 기반으로 GCN 임베딩 학습
  • User Preference
    • 유저 취향에 적합한 문서 추천
    • 검색어(Q1)와 클릭한 문서(D1)에 세대성별 선호도(U1)까지 고려하여 문서(D2)를 추천

발표 내용이 조금 어려운 부분도 있었지만 이 외에도 반응형 서비스를 개발할 때 고려해야할 점들과 꿀팁들을 전수받은 세션이었어요.

UI빌더를 지탱하는 레고 블록 같은 아키텍처 만들기

백엔드 개발자이지만 레고를 좋아하는 저로써는 굉장히 궁금증을 유발하는 제목이라 이 세션을 지나칠 수 없었답니다.

‘레고 블록을 조립하듯 애플리케이션을 만들고 싶다’ 라는 상상에서 가지고 있는 UI 빌딩 기술을 레고같은 SDK로 만들기 시작했다고 하셨어요.

  • Redux 아키텍처를 가져와 Undo/Redo 구현의 유리함과 동시편집 대비
  • 기본 재료가 있는 Core와 Model의 블록을 이용해 Builder를 조립하는 2-계층 아키텍처 구성
  • 2-계층 아키텍처의 문제점
    • 너무 깐깐한 코어 로직
      • Core가 에디터의 스펙을 결정 → 부족한 계층과 불명확한 책임
      • 기초 라이브러리 및 유틸리티 , UI 빌더의 편집 전략을 결정하는 도메인이 들어있는 모델 및 상태 관리 , 프로덕트의 스펙을 결정하는 UI 빌더 , 서비스 애플리케이션 → 계층을 더 나누고, 책임을 재설계하여 문제 해결
    • 너무 무거운 프로덕트 뷰
      • Core에서 기본적으로 제공하는 블록이 적어 Product에서 만들어야하는 컴포넌트가 늘어남 → UI 파운데이션의 부재
      • Chakra-ui의 디자인을 사용하여 디자인 시스템 생성 → 디자인 시스템을 이용하여 UI 빌더를 조립 가능
    • 너무 긴 커스텀 동선
      • 하나의 커스텀 컴포넌트 수정시 많은 파일 수정하는 것이 복잡하여 실수할 가능성이 높아짐 → 사용자 관점의 부재
      • 모델, 뷰, 로직,(이상 블록) 프로퍼티(UI빌더)와 같은 블록의 자격을 적절한 계층에 배치하고 동선을 생각하며 결합을 한 지점으로 모으고 새로 생긴 구역(블록)을 계층에 통합시킴 → 변경을 모듈화하여 반으로 줄어든 동선으로 인해 실수할 가능성 낮아짐

이 외에도 확장성을 위한 플러그인과 관련된 발표도 해주셨어요. 발표자 분이 재미있으셨기도 했고 전반적인 내용을 백엔드 개발자가 들어도 알아듣기 쉽게 설명해주셔서 흥미로웠던 세션이었어요.

중요한 건 꺾이지 않는 마음: 스마트에디터의 도전

앞의 프론트 세션이 꽤 흥미로웠어서 같은 장소에서 연달아 프론트 세션을 들었어요. (유행어를 세션 제목으로 쓴 것도 마음을 사로잡는데 한 몫 했던 것 같아요.)

발표의 흐름은 스마트 에디터의 발전 과정에 대한 내용이었고, 그 외에도 컴포넌트의 성능 하락 이슈 해결, Action, 스마트 에디터 스타일 변화 등 많은 내용들을 발표해주셨어요.

  • 1세대 에디터(SE 2.0)
    • contenteditable 기반 → HTML 그대로 저장
    • 문제점
      • 브라우저 대응 어려움
      • 스타일이 inline style로 추가되어 태블릿 등 멀티 디바이스 대응 어려움
  • 1.5세대 에디터(SE 3.0)
    • 텍스트 컴포넌트만 contenteditable 사용 (1세대 브라우저 대응 일부 해결)
    • JSON으로 문서를 변환해 저장 (1세대의 멀티 디바이스 대응 문제 해결)
    • 문제점
      • 텍스트 컴포넌트마다 각각의 contenteditable을 사용하기 때문에 여러 영역의 텍스트를 선택할 때 어색하게 동작함
  • 2세대 에디터(SE ONE)
    • 가상 커서 (1.5세대 어색한 Selection 동작 해결)
    • Input Buffer (1.5세대의 브라우저 대응 문제 해결)
    • 문제점
      • 다국어 입력(IME) 처리
      • 우 클릭 메뉴에 붙여넣기가 존재하지 않음 → 확장 프로그램을 사용해서 일부 해결하였으나 완전히 해결되지는 않음
  • 3세대 에디터(SE ONE V2)
    • 전체 영역을 contenteditable로 활용 (2세대의 문제점 모두 쉽게 해결 가능)
    • 문제점
      • React, MobX는 vDOM을 별도록 관리하지만 contenteditable은 DOM을 유저가 직접 변경하여 vDOM과 DOM의 싱크가 깨짐 ⇒ Upstream와 Downstream이 동시에 발생하지 않도록 제어하여 해결

위에서도 확인할 수 있듯이 이전 에디터에서 발생한 문제점을 파악하고 그 이후 세대에서 이를 개선하기 위해 고민하고 해결하신 과정이 잘 전달되어서 인상깊었어요. 그 과정에서 해결방안이 특허로 등록되었다는 것도 신기했고, 발표자 분의 특허 등록했다는 멘트는 아직까지도 귀에서 생생하답니다.😁

느낀점

여전히 AI는 정말 뜨거웠어요. 키노트부터 많은 세션에서 AI에 대한 언급은 빠지지 않고 나왔는데 제가 생각했던 것보다 더 활발하게 많은 분야에서 AI가 사용되고 있음을 데뷰에서 한 번 더 느낄 수 있었어요.

그리고 글 처음에도 언급했듯이 DEVIEW2023은 저의 첫 개발자 컨퍼런스에요. 아직 개발 경력이 많지 않기에 이런 개발자 컨퍼런스에 가서 얼마나 알아들을 수 있을까라는 걱정과 함께 신청을 매번 망설였어요. 예상대로 아는 것보다 모르는 것과 처음 듣는 것들이 더 많았지만(..ㅎㅎ) 현장에 온 수많은 개발자들의 열정은 확실하게 느끼고 올 수 있었고 더 열심히 공부하고 성장해야겠다는 생각을 다시 하고 올 수 있는 계기가 되었던 것 같아요.

다음으로 가게 될 개발자 컨퍼런스가 어떤 곳일지 아직 모르겠지만 그 때는 이번의 저보다 조금 더 성장해있기를 바라며..

꼬꼬마 개발자의 DEVIEW 2023 후기 끝~! 🙌

목록으로