안녕하세요, 카카오스타일 지그재그 서비스 FE팀의 제이슨입니다.2023년 초, 저희 팀은 비즈니스와 더불어 기술적인 개선이 필요하다는 것을 느꼈습니다. 그중에서도 특히 여러 지면에서 독립적으로 관리되고 있던 상품 카드 컴포넌트의 일원화 작업이 중요하게 여겨졌고. 이 문제를 해결하기 위해서는 단순 리팩토링을 넘어, 팀 전체의 UI/UX를 통합적으로 관리할 수 있는 디자인 시스템의 재구축이 필요하다고 판단했습니다.당시 팀 리더와의 1:1 미팅에서 프로젝트를 맡아보면 어떻겠냐는 제안을 받게 되었는데 이런 제안이 처음에는 큰 부담으로 다가왔습니다. 무엇보다, 디자인 시스템을 완성한다는 것은 마치 이루어질 수 없는 꿈처럼 느껴졌기 때문입니다. 디자이너와 개발자가 한마음이 되어야 하는 이상적인 목표는 쉽지 않은 도전이었고, 상품 카드를 하나의 시스템으로 통합하는 작업 역시 큰 난관으로 느껴졌기 때문입니다.위와 같은 이유로 처음에는 조금 망설였지만, 고민 끝에 ‘안 된다고 포기하기보다는 일단 해보는 게 뭐라도 얻을 수 있지 않을까‘라는 생각이 들었습니다. 그렇게 저는 디자인 시스템의 기반을 재구축하는 작업을 시작했고, 이를 바탕으로 상품 카드 컴포넌트를 일원화하는 목표를 설정하게 되었습니다.이 글에서는 2023년 중반부터 1년 이상 진행했던 디자인 시스템 재구축 프로젝트에서 마주한 상품 카드 통합, CSS 변수 기반 토큰 도입, 모듈화 작업 등 주요 과제와 그 해결 과정을 공유하고자 합니다. 비슷한 고민을 하고 계신 분들께 조금이나마 도움이 되었으면 좋겠습니다.프로젝트를 시작하기에 앞서, 기존 디자인 시스템이 어떻게 관리되고 있는지 파악했습니다. 기존에는 여러 지면에서 각각 독립적으로 관리되고 있었으며, 일관성이 부족하고 중복되는 코드가 많았습니다. 스타일링은 Emotion 라이브러리를 활용했는데, 각 컴포넌트는 색상, 타이포그래피, 아이콘 등 기본적인 디자인 토큰과 에셋을 개별적으로 가져와 적용하는 방식이었습니다.또한 디자인 시스템이라고 붙이기는 했지만 단순한 컴포넌트 모음에서 크게 벗어나지 않은 상태였습니다. 당시 앱 플랫폼의 디자인 시스템을 잘 갖추어져 있었기 때문에, 이 경험을 바탕으로 웹 환경에 최적화해서 디자인 시스템을 재구축하기로 했습니다.현황을 파악한 뒤, 다음과 같은 목표를 설정하게 되었습니다.• 프로젝트 구조 정의: 모듈화를 통해 유지보수와 확장성을 개선.• 스타일링 방식 선택: 런타임 CSS-in-JS 방식의 한계를 고려하여 제로 런타임 스타일링 방식으로 전환.• CSS 변수 기반 디자인 토큰과 테마 관리: 테마와 디자인 토큰 관리의 효율성 개선.• 상품 카드 컴포넌트 일원화: 중복 코드를 줄이고 일관성을 높이기 위한 시스템 통합.기존에는 색상, 아이콘, 테마, 컴포넌트 등 모든 요소가 하나의 패키지 안에서 구성되어 있었습니다. 이 방식은 초기에는 관리가 편했지만, 점차 기능이 추가되면서 관심사가 명확하지 않아 유지보수와 확장이 어려워지는 문제가 발생했습니다. 특히, 새로운 기능이 추가될 때 배럴 파일에 해당 기능을 내보내는 작업

리디북스 프론트엔드 웹을 개발하는 한준희라고 합니다. 처음 입사해 직접 코드를 봤을 때 무척 놀랐어요. 10년이나 된 서비스라 오래된 코드도 많았거든요. 그걸 새롭게 바꾸려 한 시도 역시 지층처럼 고스란히 쌓여있었고요. 프론트엔드 기술 스택을 하나로 통합하는 React 리팩토링 프로젝트, 지금부터 소개합니다. 리액트에 진심인 개발자 영상 시리즈  RIDIBOOKS web 1부 RIDIBOOKS web 2부 프론트엔드 기술 통합React 리팩토링 프론트엔드 기술 스택을 하나로 통합하는 리팩토링(refactoring) 프로젝트를 시작했습니다. 핵심 목적은 생산성과 유지보수성이었어요. 디자인은 그대로 유지하지만, 구현은 완전히 새로 개발하는 것이 골자였습니다. 리액트를 리팩토링하는 것이 가장 효율적이라고 판단했어요. 리액트가 기존 리디북스에서 가장 높은 비중을 차지하고 있었기 때문입니다. 기존에는 여러 프론트엔드 팀이 각각의 도메인에 해당하는 프론트엔드를 운영했었습니다. 그래서 어떤 서비스는 아예 기술 스택이 다르기도 했고, 스택은 같지만 컨벤션이 전혀 다른 경우도 있었어요. 하지만 이번 기회로 리디의 전체 서비스 기술은 대동단결하게 되었습니다. 앱은 React-Native로, 웹은 React로 말이죠. 저를 포함해 총 5명의 프론트엔드 엔지니어가 프로젝트를 진행하고 있습니다. 당연히 비즈니스 피처 개발이 우선순위가 높기에, 피처 개발 약 60%, 리팩토링 40% 의 비중으로 운영하고 있어요. 새롭게 개발하거나 기존 페이지를 수정해야 하는 경우, 되도록 리팩토링도 같이 진행하려 하고요. React 장단점?jsx 문법과 component front-end view library 처음 이런 프론트엔드 뷰 라이브러리를 접했던 건 앵귤러(Angular)였어요. 그때 접한 앵귤러의 문법은 서버사이드의 문법과 비슷하다고 느꼈는데요. 렌더와 액션을 처리하는 부분이 template와 controller로 나뉜 구조죠. 하지만 리액트는 jsx 문법으로, 한 파일 안에서 렌더와 액션 모두를 한눈에 보며 개발할 수 있어서 좋았어요. 특히 jsx 문법과 그 당시 리액트가 보여주었던 빠른 퍼포먼스에 반했던 기억이 나요. 반대로 리액트의 단점으로 생각하는 부분도 있는데, 지금은 많이 개선되었어요. 먼저, 타입스크립트가 없었을 때는 propTypes로 처리하다 보니 여러 가지로 불편했어요. 다행히 타입스크립트를 도입하고 나서는 타입 관련 문제들이 거의 해결되었습니다. 또, class component로 개발할 때는 라이프사이클 관리가 비교적 쉬웠는데요. 상태 변화에 따른 최적화, componentWillUpdate와 같은 메소드, (지금은 다른 함수로 대체되었지만) 컴포넌트 상태가 변경될 때 최적화에 손이 참 많이 갔었죠. 지금은 모두 function component로 개발하고 있습니다. 훅을 통해 거의 모든 걸 구현할 수 있어 코드를 간결하고 직관적으로 짤 수 있고, 커스텀 훅으로 재사용성도 높아지게 되었는데요. 하지만 더 복잡해진 면도 있다고 생각해요. useE

안녕하세요.? 2차 포스팅으로 다시 돌아온 SKT AI fellowship 3기 Cycling Hit 팀입니다! 저희는 그동안 한국어 멀티모달 감정 인식 AI 모델 개 발 연구 진행에 힘을 쏟고 있었는데요. 이번 포스팅을 통해 저희가 진행한 부분에 대한 설명과 함께 데모 영상도 보여 드리고자 합니다.• 연구계획(1) 블로그 참조 : https://devocean.sk.com/search/techBoardDetail.do?ID=163238Dataset Preparation먼저 데이터셋 선정 및 전처리 가공 과정을 말씀드릴게요.저희는 기본적으로 AI Hub 멀티 모달 영상 AI데이터셋을 사용했습니다. 110시간 17분 분량의 멀티 모달(영상, 음성, 텍스트) 데이터셋이며 총 8만 여개의 발화 구간이 존재합니다. 각각의 발화 구간은 기쁨, 슬픔, 분노, 놀람, 공포, 경멸, 혐오, 중립에 관한 총 8종의 감정 라벨링이 있습니다. 추가적으로 감정의 강도를 나타 내는 Arousal이 1(약함)부터 10(강함)까지 있고, 감정의 긍/부정도를 나타내는 Valence도 1(부정)부터 10(긍정) 까지 확인할 수 있습니다. 각각의 데이터 수를 정리해 보면 다음과 같습니다.중간 발표까지는 모든 감정 class를 활용하지 않고, 부정(Negative) / 중립 (Neutral) / 긍정 (Positive)의 총 3가지 class에 대해서만 감정 인식 분류를 진행했습니다. 앞서 언급한 8종의 감정 라벨링 중에서 기쁨(Happy)만을 긍정에 포함시켰고, 슬픔/분노/공포/경멸/혐오 5가지 감정 을 부정에 포함시켰습니다. 놀람(Surprise)는 긍정인지 부정인지 애매한 데이터가 많았기 때문에 데이터셋에서 제외시켰습니다.앞서 대략 8만 여개의 발화 데 이터가 있다고 말씀드렸지만 이 많은 데이터를 모두 사용할 수는 없었습니다. 왜냐하면 위 표에서도 볼 수 있듯이, 각 감정별 데이터수가 Unbalance 하였고, 실제로 음원을 들어보았을 때 배우의 연기력이 부족하거나 레이블링이 잘못된 경우가 많았기 때문입니다. 그래서 저희는 학습에 사용할 데이터셋을 추려내는 몇 가지 작업을 실행하였습니다.우선, 텍스트와 음성의 Valence 및 Arousal를 활용하여 Weighted Valence를 구하고 해당 값이 극단적인 데이터만을 활용하여 학습을 진행합니다. 3가지 classes 중 neutral은 그대로 사용하지만 positive / negative의 경우 valence 값이 현저히 높거나/낮은 데이터들만 이용하였습니다. 위 그림에서처럼 모든 데이터셋이 아니라 특정 positive / negative 데이터들만을 골라서 감정이 확실하다고 가정하고 사용한 것입니다. 즉, 비교적 감정의 세기가 확실한 데이터만을 학습에 활용하자는 의도를 담고 있으며 이는 그저 좋은 데이터를 선별하기 위한 ‘분류기’로 활용이 됩니다. 해당 ‘분류기’를 통해 8만 여개의 전체 데이터를 추론하여 맞춘 데이터는 질 좋은 데이터로 간주하고 기본 데이터셋을 구성하였습니다. 또한, 추가적인 Human Ef

안녕하세요.?저희는 멀티모달 감정 인식 AI 모델 개발 연구를 진행하게 된 SKT AI fellowship 3기Cycling Hit 팀입니다! 이 포스팅을 통해 SKT AI Fellowship에서 저희가 앞으로 진행하게 될 내용에 대해 전해드리려고 해요.Emotion Recognition이란?'감정 인식'이라는 분야를 떠올리면, 다들 아직 생소한 느낌을 받으실 것 같은데요, 하지만 저희의 일상 모든 부분에 감정이 녹아있음을 생각하면 그 활용 범위가 무궁무진함을 알 수 있습니다. SKT AI Fellowship 의 여러 주제들 중에서도, 저희는 사람의 감정을 인식하는 방법에 흥미를 느껴서 해당 주제를 선택하게 되었습니다. 사용자의 표정, 억양, 행동 등 각종 데이 터를 분석하여 감정적인 맥락을 추가하면 Human Computer Interaction(HCI)에 주요한 역할을 할 수 있습니다. 실제로, Amazon에서는 기쁘거나 화난, 또는 슬픈 어조로 응답이 가능한 Alexa를 출시하고 있습니다.사람의 표정, 말투, 대화, 행동 등 거의 모든 표현에 그 감정이 녹아 있을텐데, 저희는 이러한 다양한 정보 중에서도 '말'에 집중하여 음성?️과, 그 텍스트?를 통해 Multi-modal Emotion Recognition을 연구해보고자 합니다.사실 음성과 텍스트, 또는 이미지나 영 상, 센서 정보 등을 각각 활용한 감정 인식 연구는 활발하게 이루어지고 있지만, 저희의 주제처럼 음성과 텍스트 정보를 모두 활용한 Multi-modal Emotion Recognition에 대한 선행 연구는 아직 많지 않은 상황입니다. 특히나 한국어 데이터셋에 대해서는 기존 연구 발표 내용이 극히 제한적이라는 부분에 기인하여, 저희는 한국어 감정 인식에 대해 새로운 지표를 열어보고자 합니다. ㅎㅎ연구 목적 및 목표저희의 연구 목적은 다음과 같습니다.• None Speech&Text활용 가능한 Emotion Recognition Datasets 확보(한글/영어)• None 음성(Speech), 텍스트(Text) Encoder로부터 감정 인식에 효과적인 Modality Fusion 방식 고안• None Multi-modal Emotion Recognition 모델 설계 및 정확도 성능 고도화먼저, Emotion Recognition만을 위해 따로 사용되는 충분한 양의 데이터셋이 많지 않기 때문에, 텍스트와 음성 정보가 모두 담겨 있으면서도 감정 Labeling이 되어 있는 데이터셋을 모아 구축해야 합니다. 이후 Speech와 Text Encoder로부터 효과적인 감 정 분류가 가능한 Fusion 방식에 대해 여러 실험을 통해 연구할 계획입니다. 한국어 데이터셋에 대해 효과적인 모델을 개발한 후에는, 영문 데이터셋에도 적용하여 세계적인 감정 인식 성능을 위해 도전할 것입니다! ?️연구 배경 소개세부적인 연구 진행 내용을 첫 포스팅에서 다루기는 힘들겠지만, 저희의 연구 배경 에 대해서 간략하게나마 소개해볼까 합니다.Uni-modal Emotion Recognition