[요즘 우아한 개발] 개발자를 위한 셀프 서비스 디자인 시스템

2023년 12월 22일조회 255

이 글은 《요즘 당근 AI 개발》에서 발췌했습니다.

요즘 당근 AI 개발

ISBN 9791194383475지은이 당근 팀₩22,000

2021년에 진행한 SMS 발송 외부 시스템 이중화 프로젝트 이야기를 하려고 합니다. 어떤 이유로 이중화를 하게 되었고 스프링클라우드 Config를 이용해 어떻게 배포 없이 트래픽을 전환할 수 있었는지에 대한 여정이기도 합니다.

[요즘 우아한 개발] 개발자를 위한 셀프 서비스 디자인 시스템

이 글은 《우아한 요즘 개발》에서 발췌했습니다.

골든래빗 출판사

#디자인시스템 #셀프서비스

2021.10.20

임보영, 이미라, 이윤희

2020년 1분기에 사장님들을 위한 포털인 배민사장님광장의 셀프 서비스(사장님들이 직접 배민 앱에서 가게 설정 등을 수정할 수 있는 서비스) 전면 개편 프로젝트를 진행했습니다. 셀프 서비스를 만들면서 적용했던 디자인 시스템에 관해 개발자 관점에서 이야기를 해보려고 합니다.

디자인 시스템에서 시스템이란 ‘복잡한 사회적 체계의 맥락에서 구조와 행동을 통제하는 규칙들의 집합체’에 가깝습니다. 저희는 단순히 UI/UX 가이드라인이 정의된 UI 템플릿이 아닌, 프로토콜과 같은 매우 강력한 규칙으로 시스템을 만들고 이를 바탕으로 디자인 시스템을 만들었습니다.

셀프 서비스 개편은 50여 페이지, 140여 다이얼로그, 10여 API 호스트, 150여 REST/GraphQL 엔드포인트와의 연결이 되어 있는 작지 않은 프로젝트였습니다. 게다가 다양한 크기의 기기들에 대응하는 반응형 제작도기다리고 있습니다.

거기에 주어진 일정은 2개월, 워킹데이로는 40일이었습니다. 단순히 계산하면 풀타임 프론트엔드 개발자 5명이 하루에 한 페이지씩 만들어야 하는 분량입니다. 하지만 아직 디자인이 나오지 않은 상태였고 QA*를 위한 시간도 미리 확보해야 했습니다. 지면도 많고 복잡도도 높았지만, 정보를 컴포넌트화해서 재사용성을 높이면 더 효율적으로 빠른 시간 안에 개발할 수 있겠다는 생각에 디자인 시스템을 도입하기로 했습니다. 아래는 셀프 서비스 디자인 시스템의 구조입니다.

• 셀프 서비스 디자인 시스템 •

* Quality Assurance. 프로젝트의 기능 검증 및 품질 테스트

코어 컴포넌트

코어 컴포넌트는 대부분 추상 클래스로 구성되어 있으며 이를 상속받아 스택을 쌓아 올리는 구조로 설계되었습니다. 이 중 BaseComponent와 PageContainer를 자세히 살펴보겠습니다.

BaseComponent

BaseComponent는 모든 컴포넌트가 상속받아야 하는 기본 클래스 컴포넌트입니다. 이 컴포넌트는 크게 세 가지 역할을 수행합니다.

첫 번째, 새로운 생명주기를 정의합니다.

두 번째, 이벤트를 자동으로 해제합니다. 컴포넌트가 마운트될 때 하는 다양한 처리 중에는 DOM 요소나 컴포넌트에 이벤트를 설정하는 경우가 있습니다. 이때 설정된 이벤트를 해제해야 하는데 종종 이를 빠뜨릴 때가 있습니다. 이를 방지하고자 on 메서드를 만들었습니다.

마지막으로, 웹 로그 관련된 tracking 멤버 변수가 있으면 자동으로 로그를 전송해줍니다. 이 값을 설정하면 마운트 시 자동으로 서버에 로그를 전송해서 데이터 시각화나 A/B 테스트에 사용할 수 있습니다.

PageContainer

추상 클래스인 BaseComponent를 상속받는 또 다른 추상 클래스로 URL이 있는 모든 페이지가 상속받아야 하는 컴포넌트입니다. PageContainer를 상속받는 컴포넌트는 반드시 해당 페이지의 뷰 로그를 남기도록 추상 변수를 사용해 강제했습니다. 도메인별로 페이지 점검이 이루어질 때 점검 화면을 보여줄 수 있도록 서버 상태를 관리하는 변수도 마련해두었습니다.

코어 라이브러리

CachedEntity

CachedEntity는 서버 사이드에서 많이 쓰이는 캐시 관리 기법이 적용된 추상 클래스입니다. 자주 변하지 않는 데이터의 경우 CachedEntity의 인터페이스에 맞춰서 구현하면 TTL(Time to Live)*이 지원되는 디스크/메모리 캐싱 기능을 사용할 수 있습니다. CachedEntity의 인터페이스를 통해 메모리 캐시 확인, IndexedDB 확인, API 호출 순서로 데이터를 조회합니다. 조회된 데이터는 IndexedDB와 메모리에도 캐시하고 재활용합니다. CachedEntity 자체는 복잡한 구조로 이루어졌지만 실제로 활용할 때는 간단한 코드만으로 복잡한 기능을 동작시킬 수 있습니다.

* 데이터의 유효 기간을 나타내는 방법으로 캐시의 성능이나 프라이버시 수준을 향상시키는 데 사용됨

화면 구성요소

본격적으로 폼 같은 구성요소를 만들고 각 화면에 빠르게 적용했습니다. 단순 UI만을 구현한 컴포넌트가 아닌 컴포넌트 간의 관계를 고려해 다양한 규칙들을 정의했습니다. 그덕분에 화면 구성에 드는 고민 시간을 줄일 수 있었습니다.

이렇게 만든 카드 컴포넌트는 유연하고 확장 가능한 카드 형식의 콘텐츠 컨테이너이며, 선택적으로 추가할 수 있는 카드 헤더와 카드 레이아웃(행/열 정렬) 컴포넌트를 제공합니다. 카드 하위에 있는 아이템들을 재구성해서 노출시키고 있어서 나중에 레이아웃이 변경되더라도 기존 코드들을 수정하지 않고 카드 컴포넌트에서 재조립할 수 있다는 장점이 있습니다.

상속 구조

구성요소를 만들 때 공통적인 부분은 최대한 추상 클래스에 구현해, 비즈니스 로직과 관련된 부분만을 작성하도록 영역을 격리했습니다. Dialog 컴포넌트는 비즈니스 로직이 들어가는 화면에만 집중하도록 만든 대표적인 추상 컴포넌트입니다. 컴포넌트는 상속받는 곳에서 메서드를 오버라이드*해 커스텀이 가능하도록 설계되었습니다.

Dialog 컴포넌트

Dialog 컴포넌트는 정보 또는 경고 메시지를 표시해 사용자에게 보여주는 추상 클래스입니다. 전역 스토어로 관리되며, 화면에 그려주는 부분은 Root Component에서 담당합니다. 모든 다이얼로그는 Dialog 컴포넌트를 상속받고 추상 메서드(RenderBody)를 구현해야 합니다.

특수한 상황에서는 renderTitle, renderFooter를 오버라이드해 다른 형태로 보이게 할 수 있고, 그보다 더 큰 변화가 필요한 경우 renderContent 전체를 오버라이드해 다이얼로그의 open/close 기능만 사용하고 완전히 다른 표현 형식을 가지게 할 수도 있습니다. 이처럼 하나의 상위 클래스를 만들어서 오버라이드를 통해 중복 구현해야 하는 부분들을 최대한 줄였습니다.

StepDialog 컴포넌트

StepDialog 컴포넌트는 Dialog를 상속받은 추상 클래스입니다. 긴 호흡의 UX 컨텍스트를 가진 화면들이 이전/다음 버튼으로 연결된 다이얼로그를 구현하는 데 사용됩니다. StepDialog는 대부분 여러 화면을 구성하는데 하나의 데이터 객체를 사용합니다. 그래서 진행 상태, 사용할 데이터 등을 포함한 로컬 스토어를 가지며 다이얼로그 내의 UI들은 이 스토어 정보의 변화에 반응하게 되어 있습니다.

StepDialog를 만들 때 Step이라는 추상 클래스 컴포넌트를 상속받아 각 화면을 구현합니다. 그리고 StepDialog의 추상 메서드 renderSteps( )를 구현할 때 각 화면의 컴포넌트를 배열로 반환해 각 단계를 배열 순서로 노출시킵니다.

이처럼 디자인 시스템에서는 대부분 코드를 객체지향 추상 클래스로 구성해서 셀프 서비스 프로젝트를 진행할 때는 비즈니스 로직을 처리하는 데 집중할 수 있게 했습니다. 공통된 UI/UX와 규칙을 정의해 스타일에 대한 고민 없이 큰 틀에서의 디자인은 그대로 이어가도록 한 겁니다. 또한 새로운 컨텍스트가 필요한 부분들만 캐스케이딩(Cascading)*해 사용하여 커뮤니케이션 시간은 줄고 업무 속도는 향상되었습니다.

지금까지 디자인 시스템의 도입 과정과 생산성을 높이는 시스템 설계 경험을 소개해보았습니다. 디자인 시스템을 구축하고 끝나는 것이 아닌 지속적으로 보완하고 개선하기 위한 장치로써 매주 워크숍을 진행하고 있고, 여기서 다양한 코드를 함께 만들고 논의하며 신뢰를 쌓아가고 있습니다.

* 적용된 스타일 중 어떤 스타일을 선택할지 우선순위를 결정하는 원리

◆◆◆

JPA + OAuth2 + JWT + AWS와 배우는 스프링 부트 3

Java 백엔드 입문자를 위한 풀 패키지

실력을 갖춘 개발자로 성장하려면 시작이 중요합니다.

그래서 이 책은 무엇부터 익혀야 하는지 막막한 입문자에게 백엔드 개발의 필수 지식을 학습 로드맵 중심으로 설명합니다.

이어서 스프링 부트 3 개발에 꼭 필요한 4대장인 JPA ORM, OAuth2 인증, AWS 배포, CI/CD를 최신 트렌드에 맞게 그리고 실무에 유용하게 알려줍니다.

모든 장 끝에는 연습문제가 수록되어 있어 배운 내용을 점검할 수 있습니다. 이 책이 여러분의 백엔드 개발자 여정에 든든한 나침반이 되어 줄 겁니다.

책 상세보기: https://goldenrabbit.co.kr/product/springboot3java

저자 우아한 형제들

우아한형제들은 배달이 일상을 조금 더 행복하게 하도록 오늘도 달리고 있습니다. 평범한 사람들이 모여 비범한 성과를 만들어 내는 곳이될 수 있도록 건강한 조직문화를 만드는 일에 진심을 다합니다. 2016년부터 ‘우아한형제들 기술블로그’를 운영하며 개발 조직의 성장 과정을 기록하고 있습니다.

AI AWS DevOps IDC IT IT기업 JIRA JPA Next.js 개발 개발 실무 개발자 개발팀장 경력 경력관리 관리자 기업문화 기획 데브옵스 리액트 리팩터링 리팩토링 매니저 머신러닝 문제해결 배달의민족 배민 백엔드 블로그 사내문화 성장 소프트스킬 스크럼 스타트업 스프링부트 시니어 애자일 온보딩 우아한형제들 유니콘 이력관리 이직 인공지능 자기계발 젠킨스 조직문화 주니어 지라 취업 커리어 커리어패스 코드리뷰 코딩 프런트엔드 프로그래머 프론트엔드

📚 더 읽기

[PM 원칙] 시작하는 PM을 위한 5가지 스킬_by 신필수
[코딩 테스트 합격자 되기] 백트래킹– 1. 백트래킹과 백트래킹 알고리즘 개념
[PM 원칙] PM의 이해 : PM은 ‘왜’ 있어야 할까요?_by 장홍석
▶[요즘 우아한 개발] 개발자를 위한 셀프 서비스 디자인 시스템
[실전 머신러닝] XGBoost:커플 성사 여부 예측하기 ❹
[코딩 테스트 합격자 되기] 그래프 – 3. 그래프 몸풀기 문제
[실전 머신러닝] XGBoost:커플 성사 여부 예측하기 ➌

저자 소개

당근 팀

당근의 여러 부서에서 각자 다른 문제를 풀던 11명이 하나의 질문으로 모였습니다. “AI로 더 잘 해결할 수 없을까?” 우리는 직군의 경계를 넘어 함께 고민하고 실험하며, ‘동네를 여는 문’이라는 당근의 비전을 AI로 구현해가는 사람들입니다. 이웃과 이웃을 더 따뜻하게 연결하고, 당근에서의 삶을 더 편리하게 만드는 일. 그 중심에서 AI가 할 수 있는 역할을 찾아가고 있습니다.

📚《요즘 당근 AI 개발》 자주 묻는 질문

Q.당근에서 AI를 어떻게 활용하고 있는지 궁금합니다. 구체적인 사례를 알고 싶어요.

당근은 AI를 다양한 방식으로 활용하여 사용자 경험을 향상시키고 내부 업무 효율성을 높이고 있습니다. 외부 사용자를 위한 사례로는 AI 물품 추천, AI 게시글 작성, AI 시세 조회, CS 챗봇 등이 있습니다. AI 물품 추천은 사용자의 검색 기록, 관심 카테고리 등을 분석하여 개인에게 최적화된 물품을 추천합니다. AI 게시글 작성은 사용자가 원하는 물품 정보를 입력하면 자동으로 제목과 상세 설명을 생성해줍니다. AI 시세 조회는 과거 거래 데이터를 기반으로 현재 시세를 예측하여 사용자에게 정보를 제공합니다. CS 챗봇은 사용자의 문의에 24시간 응대하여 빠른 문제 해결을 돕습니다. 내부 구성원을 위한 사례로는 리뷰 자동 리포트 발행, 온콜 업무 단축, 임베딩 시멘틱 캐싱, 운영업무 자동화 등이 있습니다. 리뷰 자동 리포트 발행은 사용자 리뷰를 분석하여 핵심 내용을 요약하고 트렌드를 파악하여 개선점을 도출합니다. 온콜 업무 단축은 AI를 활용하여 문제 발생 시 담당자에게 자동 알림을 보내고 초기 대응을 지원합니다. 임베딩 시멘틱 캐싱은 검색 속도를 향상시켜 사용자 경험을 개선합니다. 운영업무 자동화는 반복적인 작업을 자동화하여 효율성을 높입니다. 이러한 다양한 사례를 통해 당근은 AI를 적극적으로 활용하여 사용자 만족도를 높이고 내부 효율성을 개선하고 있습니다. 더 자세한 내용은 《요즘 당근 AI 개발》에서 확인하실 수 있습니다.

Q.AI 에이전트와 MCP 개발이 무엇인지, 당근에서는 어떻게 활용하고 있는지 알고 싶습니다.

AI 에이전트와 MCP(Message Composition Platform)는 AI 기술을 활용하여 사용자 경험을 혁신하는 핵심 요소입니다. AI 에이전트는 사용자의 의도를 파악하고 작업을 자동화하는 지능형 시스템입니다. 당근에서는 AI 에이전트를 활용하여 사용자 문의에 자동 응답하거나, 개인 맞춤형 추천을 제공하거나, 특정 작업을 대신 수행하는 등 다양한 서비스를 제공합니다. MCP는 메시지 작성 및 관리를 위한 플랫폼으로, AI 기술을 활용하여 메시지 내용을 자동 생성하거나, 최적의 메시지 형식을 추천하거나, 메시지 전송 시점을 예측하는 등 다양한 기능을 제공합니다. 당근에서는 MCP를 활용하여 사용자에게 보다 효과적이고 편리한 커뮤니케이션 환경을 제공합니다. 예를 들어, 물품 판매 게시글을 작성할 때 AI가 자동으로 제목과 설명을 제안해주거나, 구매자와 판매자 간의 채팅 내용을 분석하여 사기 위험을 감지하는 데 활용될 수 있습니다. 이와 관련된 자세한 내용은 《요즘 당근 AI 개발》에서 확인하실 수 있습니다.

Q.바이브 코딩이 무엇인가요? AI 코딩 도구와 어떤 관련이 있나요?

바이브 코딩은 개발자가 코딩 과정에서 느끼는 즐거움과 몰입감을 극대화하는 것을 의미합니다. AI 코딩 도구는 이러한 바이브 코딩을 지원하기 위해 개발되었으며, 코드 자동 완성, 오류 검출, 코드 제안 등 다양한 기능을 제공하여 개발자가 보다 쉽고 효율적으로 코딩할 수 있도록 돕습니다. 당근에서도 AI 코딩 도구를 적극적으로 활용하여 개발 생산성을 향상시키고 있습니다. 예를 들어, AI가 코드를 자동으로 완성해주거나, 흔히 발생하는 오류를 미리 감지하여 수정하도록 제안함으로써 개발 시간을 단축하고 코드 품질을 향상시킬 수 있습니다. 또한, AI는 다양한 코딩 패턴을 학습하여 개발자에게 최적의 코딩 방식을 제안함으로써 개발자가 보다 창의적인 문제 해결에 집중할 수 있도록 돕습니다. 바이브 코딩과 AI 코딩 도구에 대한 더 자세한 내용은 《요즘 당근 AI 개발》에서 확인하실 수 있습니다.

Q.프롬프트 엔지니어링 기법 고도화는 무엇이며, 왜 중요한가요?

프롬프트 엔지니어링은 AI 모델, 특히 대규모 언어 모델(LLM)에 효과적인 프롬프트를 설계하고 최적화하는 기술입니다. 이는 AI 모델이 원하는 결과를 정확하고 효율적으로 생성하도록 유도하는 데 매우 중요합니다. 프롬프트 엔지니어링 기법을 고도화한다는 것은, 단순히 질문을 잘 던지는 것을 넘어, AI 모델의 작동 방식을 이해하고, 모델이 가진 강점과 약점을 파악하여, 모델이 가장 잘 수행할 수 있는 형태로 질문을 구성하는 것을 의미합니다. 당근 팀은 사용자 경험을 극대화하기 위해 프롬프트 엔지니어링 기법을 고도화하는 데 많은 노력을 기울였습니다. AI 모델을 활용하여 물품 추천, 게시글 작성, 시세 조회 등 다양한 서비스를 제공하면서, 각 서비스에 최적화된 프롬프트 엔지니어링 기법을 개발하고 적용했습니다. 이 과정에서 얻은 경험과 노하우는 《요즘 당근 AI 개발》에 자세히 담겨 있습니다. AI 모델을 활용한 서비스 개발에 관심 있는 분이라면, 이 책을 통해 프롬프트 엔지니어링 기법 고도화의 중요성과 실제 적용 사례를 배울 수 있을 것입니다.

Q.AI를 활용한 개발을 배우고 싶은데, 어디서부터 시작해야 할지 막막합니다.

AI 활용 개발을 시작하는 것은 흥미로운 여정이 될 것입니다. 먼저 AI의 기본 개념과 원리를 이해하는 것이 중요합니다. 온라인 강의, 책, 튜토리얼 등 다양한 학습 자료를 활용하여 AI의 핵심 개념을 습득하세요. 그다음, 파이썬과 같은 프로그래밍 언어를 익히는 것이 좋습니다. 파이썬은 AI 개발에 가장 널리 사용되는 언어 중 하나이며, 다양한 AI 관련 라이브러리와 프레임워크를 제공합니다. 텐서플로우, 파이토치, scikit-learn과 같은 AI 라이브러리를 사용해 간단한 AI 모델을 직접 만들어보는 것이 좋습니다. 이러한 경험을 통해 AI의 작동 방식을 더 깊이 이해할 수 있습니다. 또한, AI 관련 프로젝트에 참여하거나, 오픈소스 프로젝트에 기여하면서 실력을 향상시킬 수 있습니다. 당근 팀의 경험을 통해 배우는 것도 좋은 방법입니다. 《요즘 당근 AI 개발》에는 당근 팀이 사용자 문제를 AI로 해결해나가는 여정이 담겨 있습니다. 이 책을 통해 실제 서비스에 AI를 적용하는 방법을 배우고, AI 개발에 대한 영감을 얻을 수 있을 것입니다.

Q.AI 모델을 서비스에 적용할 때 성능 문제를 어떻게 해결할 수 있을까요?

AI 모델을 서비스에 적용할 때 성능 문제는 흔히 발생합니다. 이를 해결하기 위해서는 다양한 접근 방식이 필요합니다. 먼저, 모델의 복잡도를 줄이는 방법을 고려해볼 수 있습니다. 모델의 레이어 수를 줄이거나, 파라미터 수를 줄이는 등의 방법을 통해 모델의 연산량을 줄일 수 있습니다. 또한, 데이터 전처리 과정을 최적화하여 모델의 학습 효율성을 높일 수 있습니다. 불필요한 데이터를 제거하거나, 데이터의 형식을 통일하거나, 특성 스케일링을 적용하는 등의 방법을 통해 모델의 성능을 향상시킬 수 있습니다. 임베딩 시멘틱 캐싱과 같은 기술을 사용하여 검색 속도를 향상시킬 수도 있습니다. 또한, 모델을 경량화하거나 양자화하는 방법을 고려해볼 수 있습니다. 모델 경량화는 모델의 크기를 줄여 메모리 사용량을 줄이고, 연산 속도를 높이는 기술입니다. 모델 양자화는 모델의 파라미터를 저정밀도로 표현하여 모델의 크기를 줄이고, 연산 속도를 높이는 기술입니다. 당근 팀은 AI 모델을 서비스에 적용하면서 다양한 성능 문제를 해결해왔습니다. 이러한 경험은 《요즘 당근 AI 개발》에 자세히 소개되어 있습니다. 이 책을 통해 AI 모델 성능 문제 해결에 대한 인사이트를 얻을 수 있을 것입니다.

Q.당근 팀은 AI를 개발하고 적용하면서 어떤 어려움을 겪었으며, 어떻게 극복했는지 궁금합니다.

당근 팀도 AI를 개발하고 적용하는 과정에서 많은 어려움을 겪었습니다. 'AI로 과연 될까?'라는 의문에서 시작하여 'AI로 어떻게 하면 될까?'라는 고민을 거듭했습니다. 데이터 부족, 모델 성능 문제, 인프라 제약 등 다양한 문제에 직면했습니다. 하지만 엔지니어, 프로덕트 매니저, 운영 매니저 등 다양한 팀원들이 협력하여 문제 해결에 나섰습니다. 데이터 확보를 위해 다양한 방법을 시도하고, 모델 성능 향상을 위해 끊임없이 실험하고, 인프라 제약을 극복하기 위해 기술적인 혁신을 이루어냈습니다. 예를 들어, AI 물품 추천 시스템을 개발할 때 초기에는 데이터가 부족하여 추천 성능이 낮았습니다. 이를 해결하기 위해 사용자 행동 데이터를 수집하고 분석하는 시스템을 구축하고, 외부 데이터 소스를 활용하여 데이터 부족 문제를 해결했습니다. 또한, 모델 성능 향상을 위해 다양한 모델 구조와 학습 방법을 시도하고, A/B 테스트를 통해 최적의 모델을 선택했습니다. 이러한 노력 덕분에 AI 물품 추천 시스템은 사용자 만족도를 크게 향상시켰습니다. 이처럼 당근 팀은 AI 개발 과정에서 겪는 어려움을 창의적인 아이디어와 끊임없는 노력으로 극복해왔습니다. 자세한 내용은 《요즘 당근 AI 개발》에서 확인하실 수 있습니다.