[요즘 우아한 개발] 만드는 사람이 수고로운 UX 개발기

2023년 10월 16일조회 182

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

요즘 당근 AI 개발

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

저는 백오피스 서비스에 더 나은 UX를 제공해 백오피스 사용자의 업무 경험이 좋아지길 바랍니다. UX를 개선해서 사용이 편해지고 휴먼 에러도 방지한다면 더 나아진 업무 환경에서 업무 생산성을 높일 수 있기 때문입니다.

[요즘 우아한 개발] 만드는 사람이 수고로운 UX 개발기

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

골든래빗 출판사

#웹프론트엔드 #UX

이찬호 2022.12.26

만드는 사람이 수고로운 UX 개발기

“만드는 사람이 수고로우면 쓰는 사람이 편하고, 만드는 사람이 편하면 쓰는 사람이 수고롭다.” 우아한형제들 사무실에서 쉽게 발견할 수 있는 문구입니다. 이 문구를 볼 때마다 나의 게으름이 서비스 사용자를 수고롭게 하는 건 아닌지 생각해보게 되는데요, 제가 개발하는 공급망 관리 서비스인 SCM은 발주를 넣는 내부 직원과 공급사에서 사용하는 백오피스 서비스입니다. 백오피스 서비스의 특성상 디자이너 없이 개발되는 경우가 대부분이고, 서버 개발자가 기능만 동작하도록 개발해서 사용할 때도 많습니다. 따라서 사용성은 쉽게 우선순위에서 밀리곤 하죠.

일반 고객용 서비스와 다르게, 백오피스 서비스는 사용자들이 하루 종일 업무에 사용합니다. 사용성이 고려되지 않은 서비스의 불편함을 감수하면서 하루 종일 고통받으며 업무를 하게 되지요. 이 때문에 사용자들 사이에서는 불편한 기능을 잘 활용하는 방법을 공유하기도 합니다.

탭 UI : 탭 기반의 멀티페이지 관리 시스템

여러분은 일상적으로 웹 브라우저를 사용할 때 탭 하나에서 모든 작업을 처리하나요? 아니면 필요한 정보와 작업마다 탭을 번갈아 열며 작업하나요? 탭 하나에서 다양한 작업을 처리하는 것은 불편합니다. 작업 중인 페이지와 관련된 정보를 보존하기 위해 탭을 사용하는 방식에 다들 익숙할 겁니다.

여러 페이지를 오가며 작업해야 하는 백오피스 서비스에서 한 번에 하나의 페이지만 볼 수 있다면 작업이 얼마나 불편할까요? 이러한 문제를 해결하기 위해 페이지 단위의 서비스가 아닌, 페이지를 탭으로 관리하며 여러 탭(페이지)을 동시에 열어두고 작업할 수 있는 탭 UI를 개발했습니다.

• SCM에 적용한 탭 예시 •

탭 UI의 핵심 기능을 살펴보면 다음과 같습니다.

왼쪽 메뉴를 클릭하면 페이지가 바뀌는 대신 새로운 탭이 열립니다.

각 탭은 독립적인 상태로, 다른 탭으로 이동한 후에도 작업 중이던 내용을 그대로 유지할 수 있습니다.

작업 중(사용자 입력 중)인 페이지를 탭에 표시합니다.

이러한 편의성은 매우 매력적이지만, 이를 구현하기 위해 개발자로서 극복해야 할 수고로움도 있었습니다.

성능 이슈 : 열려 있는 탭이 많아질수록 DOM에 추가되는 엘리먼트도 증가합니다. 이로 인해 성능 저하가 발생할 수 있습니다. 이 문제를 해결하기 위해 활성화된 탭 의 페이지만 렌더링하고, 나머지 탭의 엘리먼트는 DOM에서 제거하여 필요한 부분 만 유지하도록 설계했습니다.

상태 관리의 복잡도 : Form을 다룰 때는 일반적으로 비제어 컴포넌트Uncontrolled Component를 사용하지만, 탭이 활성화되거나 비활성화될 때 컴포넌트가 삭제되면 비제어 컴포넌트가 가지고 있던 값도 함께 사라집니다. 이를 해결하기 위해 실시간 으로 상태를 저장하고 관리하도록 제어 컴포넌트와 비슷한 방식을 도입했습니다.

탭 간 정보 동기화 : 예를 들어 상품 상세 페이지에서 수정 작업을 한 후 목록 페이 지로 돌아오면 수정된 내용이 목록 페이지에도 반영되어야 합니다. 페이지 단위의 UI에서는 두 페이지가 별개이므로 이런 동기화가 비교적 간단하지만, 탭 UI에서는 이미목록페이지가열려있기때문에탭사이별도의처리를통해수정작업후목 록 페이지로 탭을 이동했을 때 새로운 데이터를 받아올 수 있도록 설계했습니다.

프로젝트를 처음 구성할 때부터 이 탭 UI의 사용성을 최적화하기까지 정말 오랜 시간이 걸렸습니다. 그래서 새로운 프로젝트를 시작할 때도 탭 UI를 꼭 넣었으면 한다는 이야기를 듣곤 하는데요, 피드백을 들을 때마다 뿌듯함과 슬픔이 공존하곤 합니다.

입력 중인 상태 보호, 편집됨

다음으로 소개해드릴 UX는 ‘편집됨’입니다. 서비스를 사용하다가 실수로 [뒤로가기]를 누르거나, 여러 정보를 입력하던 모달을 닫아 입력 중인 정보가 날아간 경험이 있지 않으신가요? 우리가 자주 사용하는 프로그램에서는 기본적으로 편집 중인지를 체크하고 사용자가 창을 닫으려 할 때 수정 중인 내용에 대한 처리를 묻습니다.

• SCM에 반영한 편집됨 표기 •

SCM은 정보가 많은 데이터를 다루기 때문에 데이터를 입력하는 도중에 페이지를 새로 고침하거나, 모달에서 작업 중일 때 모달을 닫으면 데이터가 날아갈 수 있습니다. 이를 방지하기 위해 사용자 입력을 받는 모든 페이지와 모달에 ‘편집됨’ 상태를 넣었습니다.

• SCM에 반영한 닫기 방지 컨펌 •

편집 중인 탭 혹은 모달을 닫으려고 하면 변경 중인 내용이 있다는 것을 사용자에게 알리고, 정말로 닫겠냐고 묻습니다. [취소]를 누르면 작업 중이던 화면을 그대로 보여주고, [확인]을 누르면 작업 중인 탭 혹은 모달을 닫습니다.

편집됨 상태를 보여주려면 입력 중인 데이터와 같은 값인지 비교해야 합니다. 그리고 편집 중인지 확인하는 함수를 만들어서 모달 혹은 페이지를 닫는 함수의 맨 앞에 넣고 편집 중인지를 확인합니다. 편집 중이라면, 알림 창이 나타나 사용자에게 정말 닫을 것인지 확인합니다. 이 기능을 통해 실수로 화면을 새로고침하거나, 작업 중인 모달을 닫으려고 할 때에도 안전하게 입력 중이던 데이터를 보호할 수 있습니다.

유효성 검증 시각화

SCM은 서비스 특성상 많은 데이터를 다루다 보니 필수 입력 값에 대한 유효성 검사를 잘 보여줘야 합니다. 그래서 고안해낸 것이 ValidationItem입니다. ValidationItem은 필수로 입력해야 하는 값에 유효성 검사를 걸어두고, 사용자가 내용을 올바르게 채웠는지 피드백하는 컴포넌트입니다. ValidationItem으로 사용자에게 최대한 빠른 피드백을 주고, 또 어떤 내용을 더 입력해야 프로세스가 진행되는지를 직관적으로 보여주고 싶었습니다. 등록하는 페이지 혹은 등록하는 모달에서도 사용하고, 상태 변경을 해야 하는 상황에서 안내용으로 사용합니다. ValidtaionItem은 간단하게 label과 valid 여부만 전달받습니다.

• 페이지에서 사용 예시. 필수 값을 입력했을 때 실시간으로 입력 여부를 보여준다 •

파일 다운로드 아이콘

백오피스 서비스답게 파일을 올리고 다운로드할 일이 많습니다. 파일 다운로드를 [파일 다운로드] 버튼, 혹은 파일 이름으로 된 링크로 사용했는데, 일관성도 부족하고 직관적이지 않았습니다. 이를 해결하기 위해 파일 아이콘을 만들었습니다. 아이콘을 찾아보았으나, 마음에 드는 파일 아이콘을 찾을 수 없어서 피그마를 이용해 직접 그렸습니다. 직관적으로 파일임을 알 수 있는 디자인 위에 비슷한 유형의 확장자끼리 색을 구분해 표시했습니다.

또한 다운로드 요청을 기다리는 동안 파일 아이콘 위로 로딩을 노출시켜 여러 번 누르지 않도록 사용자 경험을 개선했습니다. FileButton 컴포넌트에 fileName만 전달하면 파일 확장자를 분석해 적절한 아이콘을 자동으로 표시합니다. 컴포넌트에 마우스 커서를 올리면 툴팁 UI에서 파일 이름도 확인할 수 있죠.

◆◆◆

‘어차피 사용하는 사람도 많지 않은 백오피스 서비스인데, 이렇게까지 해야 하나요?’라는 의문이 생길 수 있습니다. 편한 UI/UX는 사용자가 인지하지도 못 한 채 그냥 편하게 사용하지만, 불편함은 바로 알아차립니다. 이런 불편함을 사용자 몫으로 떠안게 하는 것이 아니라 어떻게 하면 사용자가 더 편하게 서비스를 사용할 수 있을지 고민하는 것이 프론트엔드 개발자에게 중요한 가치라고 믿습니다. 동일한 기능을 제공하더라도 ‘만드는 이의 수고로움을 더해 쓰는 사람이 편한’ 사용성을 제공하는 것이 배민다움이 아닐까 합니다.

저자 우아한 형제들

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

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

📚 더 읽기

저자 소개

당근 팀

당근의 여러 부서에서 각자 다른 문제를 풀던 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 개발》에서 확인하실 수 있습니다.