합성 컴포넌트 패턴을 응용하여 디자인 시스템 개선하기

Yess 팀에서는 빠른 속도와 높은 퀄리티를 함께 달성하기 위한 최선의 툴이 디자인 시스템이라고 판단했다. 이 두 가지를 쉽게 달성할 수 있도록 도와주는 도구로 Headless UI 라이브러리를 선택했고, Radix를 도입하였다. 대체적으로 만족하며 운영하고 있지만, 당연히 완벽한 시스템은 아니다. 이번 글에서는 디자인 시스템을 구현한 이후 합성 컴포넌트 패턴을 응용하여 개선한 사례에 대하여 정리해 보고자 한다.

2025년 2월 17일

AI Sales Copilot 개발 기록 - (3) Delta-Driven UI

AI Sales Copilot의 빌딩 블록들이 하나씩 늘어나면서 스트리밍은 Yess 웹앱의 핵심 UX로 자리잡게 되었다. 그러다 보니 '일단 출시부터 하고 나중에 개선하자'는 식으로 의사결정을 하고 넘어갔던 부분들이 기술 부채로 돌아오면서 백로그에 이슈가 쌓여갔다. 이때만큼은 문제를 빠르게 해결하기보다 제대로 해결하는 것을 목표로 삼고자 했다. 그래야 앞으로 더 많은 빌딩 블록을 견고하게 쌓아나갈 수 있기 때문이다. 실제로 문제를 파악하는 데만도 많은 시간이 걸렸는데, 자세히 살펴본 결과 두 가지 큰 문제와 그 문제에 대한 원인이 서로 복잡하게 얽혀 있다는 것을 알 수 있었다.

2025년 2월 12일

AI Sales Copilot 개발 기록 - (2) Streaming Queue

구현 단계에서 맞닥뜨린 첫 번째 문제는 AI Meeting Cheat-sheet에서 제공하는 컨텐츠가 한 페이지에 순차적으로 스트리밍 되어야 한다는 요구사항이었다. 프롬프트별로 6개의 요청이 AI에 순차적으로 전송되지만 응답은 웹소켓을 통해 비동기로 스트리밍되기 때문에 순서를 보장할 수 없고 사실상 병렬 처리된다. 프론트엔드에서는 응답 데이터를 순서별로 다시 줄을 세워서 화면에 렌더링해야 한다. 즉, AI 스트리밍을 재구성해야 하는 것이다.

2025년 1월 22일

AI Sales Copilot 개발 기록 - (1) 기획하는 개발자

Yess 웹앱에서 생성형 AI를 가장 적극적으로 활용한 부분은 프로젝트 런칭 전, 즉 계약을 성사시키기까지 일련의 과정에 필요한 문서 작업들이다. 전체적인 맥락을 유지하면서 특정 전략에 맞춰 문서 초안을 작성하는 데 AI의 도움을 받을 수 있다면 시간 측면에서 훨씬 효율적이다. 그렇다면 Yess 웹앱은 AI를 어떤 페인 포인트에 접목하여 고객사들의 신뢰를 얻을 수 있을까?

2025년 1월 15일

새로운 에디터 라이브러리 도입 과정

Yess 웹앱에서 문서 편집은 가장 중요한 기능이다. 따라서 Yess 프론트엔드 코드베이스에서 에디터 라이브러리에 대한 의존도는 높은 편이다. 기존에 도입된 quill 라이브러리는 유지보수가 더디고, 커스터마이즈에 유연하지 않은 점 때문에 과거에 만든 포크 버전 위로 여러 기능이 덧붙여져 있었다. 이로 인해 정상적인 버전 관리의 혜택을 받기 어려운 형태였다. 앞으로는 생성형 AI를 도입하여 더욱 인터랙티브한 요구사항에 대응해야 하는 상황을 고려했을 때 새로운 에디터 라이브러리 도입이 필요하다고 판단했다.

2024년 12월 30일

고객 경험으로부터 구현 방법 도출하기

Yess 팀에서 프론트엔드 개발자로 업무를 진행한 지 반 년 쯤 되었을 때, 웹앱을 모노레포로 전환했다. 작지 않은 규모의 레거시 코드베이스에 대해 근본적인 구조 변경을 가하는 작업이었기 때문에 노가다와 예상치 못한 빌드 에러를 해결하는 과정의 연속이었다. 하지만 blazingly fast한 경험 제공이라는 목표가 뚜렷했기 때문에 필요한 과정으로 인지하고 팀이 함께 노력할 수 있었다.

2024년 12월 11일

레거시 코드에서 에러 핸들링 시작하기

에러를 잘 핸들링한다는 것은 어떤 의미일까? 또 레거시 코드베이스에서 에러 핸들링을 시작하려면 어떤 단계로 진행해야 할까? 세 달간 팀원들과 함께 한 프로젝트에서 고민했던 과정, 성과, 그리고 남은 과제에 대해 정리해 본다.

2023년 5월 19일

2022년을 돌아보며

문득 내가 하고 있는 일들이 그저 내게 맡겨졌기에 하고 있던 것 아닌가 하는 생각이 들었다. 스스로 하고 싶은 일을 찾아서 해 보았고, 그 결과 장점과 단점이 모두 뚜렷한 경험을 하였다. 또한 그 어느 때보다도 협업의 힘을 많이 느낀 한 해였다.

2023년 2월 25일

Array? or Object?

자바스크립트 자료구조 중에서 array, object는 여러 데이터를 그룹화하는 두 가지 방법이라는 면에서 서로 유사하면서도 근본적으로 다르다. 그렇다면 둘 중 무엇이 더 효율적이고 좋은 자료구조일까?

2022년 10월 18일

JS는 싱글스레드 언어인가?

1. 자바스크립트는 스크립트 언어이다. JS는 스크립트 언어여서 싱글 스레드 언어인가? 2. 자바스크립트는 싱글 스레드 환경에서 구동된다. 그렇다면 비동기 처리는 어떻게 이루어지는 걸까?

2022년 10월 3일

로직 분리의 기준에 대하여

프로그래밍에서는 SOLID 원칙이 중요시된다. 이 중 첫 번째 원칙은 로직이 하나의 역할만을 하도록 작게 분리하라는 것이다. 그렇다면 모든 로직은 분리되어야 할까? 하나의 역할이라는 것은 어떻게 정의할까?

2022년 8월 17일

오브젝트 11장 합성과 유연한 설계

상속과 합성은 객체지향 프로그래밍에서 가장 널리 사용되는 코드 재사용 기법이다. 그러나 코드 재사용이라는 동일한 목적을 제외하면 구현 방법부터 변경을 다루는 방식까지 모든 면에서 차이가 있다.

2021년 6월 7일

오브젝트 7장 객체 분해

사람의 기억은 단기 기억과 장기 기억으로 분류되며, 장기 기억의 용량은 거의 무한대에 이른다. 그러나 장기 기억에 접근하려면 단기 기억 영역으로 옮긴 후에 처리해야 한다. 그러나 단기 기억의 저장 공간은 제약이 있다. 따라서 문제 해결에 필요한 요소의 수가 단기 기억 용량을 초과하는 순간 인지 과부하가 발생하며 문제 해결 능력이 급격하게 떨어진다.

2021년 5월 10일

WYSIWYG 에디터 선택하기

WYSIWYG은 텍스트 편집에 대한 다양한 기능을 제공하고 그 편집한 결과를 그대로 출력하여 보여주는 에디터이다. 이메일 제작을 위한 솔루션을 만들 때 WYSIWYG은 아주 중요하다. 이메일을 제작할 때 필요한 가장 기본적인 요소인 텍스트, 이미지, 버튼 중 아무래도 텍스트의 비중이 가장 높기 때문이다. 사용자 경험 중 많은 부분을 차지하고 있는 만큼 얼마나 기능이 다양한가보다도, 있는 기능이 얼마나 안정적으로 작동하는지가 중요하다. 이 명제를 깨닫고 실현할 수 있기까지 시행착오가 있었기에 정리해 보려고 한다.

2020년 9월 23일

프로젝트 폴더 구조의 변화, 바꾼 이유, 그리고 느낀 점

배리의 에디터는 아주 작은 단위부터 고민해 본 나의 첫 프로젝트이다. 시작하려고 보니 첫 컴포넌트를 어떤 폴더의 어떤 파일명으로 만들어야 할지가 고민이었다. 그때 조언을 구하며 `container` 컴포넌트와 `presentational` 컴포넌트로 구분하는 방법이 있다는 것을 알았다.

2020년 9월 23일

Redux와 React Context API 함께 사용하기

처음 개발에 입문하는 초심자의 입장에서 상태 관리의 필요성과 방법들을 살펴보았다. redux와 react의 컨텍스트, 그리고 비동기 처리에 대한 요구사항으로 redux-observable과 rxjs를 도입한 과정을 정리해본다.

2020년 9월 18일