지바이크

지쿠 UX팀의 비밀 - 1편

안녕하세요, 지쿠 UX팀 리더 꼬비입니다. 오늘은 함께 고민하고 성장해 온 프로젝트 세계의 동료들과 작은 이야기를 나눠볼까 합니다. 기획서의 잉크가 말리도록 기다리고, 디자인의 컬러가 바랠 때까지 참아내며 컨펌된 파일만을 쌓아두던 그 순간들. 어느새 6개월 후 개발이 시작되는데, 그때의 기획과 디자인이 현재의 시장과는 맞지 않게 느껴질 때의 아쉬움... 😢 최근에 맥북 업그레이드를 요청하면서 지난 6개월간 제가 사용한 툴과 언어, 프레임워크를 되돌아보니, 놀랍게도 상상 이상으로 다양하더라고요. 이 경험이 바로 이 블로그 글의 출발점이었습니다. 이 툴들과 언어들은 단순히 사용하는 기술의 수준을 넘어, '왜' 그것을 사용하는지, '어떻게' 그것을 효율적으로 활용할지를 이해하는 것이 중요한 걸 깨달았어요. 그리고 그것보다도 어느 타이밍에 어떤 도구를 사용할지의 판단이 중요했습니다. 적절한 시점의 선택은 결과의 질을 크게 끌어올릴 수 있는 핵심 요소였으니까요. 그래서 지금은 프로젝트의 라이프사이클에 맞게 도구와 기술을 적용하는 것에 더욱 신경을 쓰고 있습니다. 항상 변화하는 시장과 기술 환경 속에서도, 제 팀과 저 스스로가 끊임없이 발전하고 성장할 수 있도록 노력하는 것이 제 일의 가장 중요한 부분이죠. 함께 성장하는 여러분들과의 이 경험을 나누고 싶었습니다. 디자인 툴: 상상력과 창의성을 현실로 만들어주는 도구들 피그마(Figma): 디자이너와 기획자가 협업을 통해 상상하는 것을 그려보면서 프로토타입으로 테스트할 수 있는 플랫폼입니다. 다양한 아이디어를 시각화하고 실시간으로 확인하면서 기획 능력과 창의성을 발전시킬 수 있습니다. 프레이머(Framer): 인터랙티브 디자인과 프로토타이핑을 위한 툴로, 실제 사용자 경험을 빠르게 시뮬레이션하면서 사용성을 향상할 수 있습니다. 요즘 가장 많이 쓰는 프레이머의 눈에 띄는 장점은 기획한 것을 디자인과 개발을 동시에 할 수 있으며, 스크립트 코딩을 하기 전에 UX 최적화를 진행하면서 기획, 디자인, 개발까지 모든 것을 한 번에 처리할 수 있다는 점입니다. 포토샵(Photoshop): 이번에 업데이트된 AI 도구를 통해 쉽고 간편하게 상상하는 것을 이미지로 표현할 수 있습니다. 복잡한 작업도 단 몇 번의 클릭으로 완성할 수 있는 효율성을 자랑합니다. 일러스트(Illustrator): 벡터 기반의 그래픽 디자인 툴로, 선명하고 정교한 아트워크 제작이 가능하여 디자인의 완성도를 높입니다. 미드저니 AI(MidJourneyAI): 아이콘부터 로고, 캐릭터 이미지까지 자신이 원하는 스타일로 쉽게 디자인할 수 있습니다. 직관적인 인터페이스로 복잡한 작업도 손쉽게 해낼 수 있습니다. 스테이블디퓨전(Stable Diffusion): 내가 원하는 구도와 스타일로 자유도 높게 인공지능 디자인 작업이 가능합니다. 제한 없는 창의력을 표현할 수 있는 강력한 도구입니다. 3D 툴: 입체적인 세계를 탐험하고 창조하는 도구들 블렌더(Blender): 3D 모델링, 애니메이션, 렌더링을 위한 종합 소프트웨어로, 현실적인 3D 세계를 구축할 수 있습니다. 스플라인(Spline): 3D 디자인과 모션을 공부하고 제작하는 데 있어 사용하기 쉬운 도구로, 입문자도 쉽게 다양한 3D 작업을 수행할 수 있습니다. "3D계의 피그마"라고 불리는 스플라인은 3D에 대한 기초부터 중급까지 접근하기 쉬워, 누구나 3D 디자인의 세계를 경험해 볼 수 있게 만들어 줍니다. 키샷(KeyShot): 현실적인 디자인으로 완성도 높은 제작이 가능합니다. 렌더링 과정에서의 섬세한 조정이 가능하여 더 생동감 있는 결과물을 만들 수 있습니다. 개발 도구: 혁신과 성능을 추구하는 끊임없는 여정 언어: 기초와 발판 리액트(React): 사용자 인터페이스를 구축하는데 선호되는 라이브러리로, 컴포넌트 기반 아키텍처가 유지보수와 확장성을 증대시킵니다. 리액트 네이티브(React Native): 모바일 앱 개발을 위한 프레임워크로, 한 번의 개발로 다양한 플랫폼에서의 실행을 가능하게 합니다. 타입스크립트(Typescript): 자바스크립트의 정적 타입 지원 확장으로, 안정성과 확장성을 강화해 줍니다. 파이썬(Python): 강력한 기능을 간결한 코드로 작성할 수 있는 범용 프로그래밍 언어로, 데이터 분석, 웹 개발, 자동화 등 다양한 분야에서 활용됩니다. Node.js: 서버 측 자바스크립트 실행 환경으로, 비동기 I/O 처리 능력을 바탕으로 효율적인 서버 구현이 가능합니다. 프레임워크 및 기타 도구: 혁신과 효율의 실현 Next.js: 서버 렌더링을 지원하는 React 프레임워크로, 사용자 경험과 성능을 동시에 최적화할 수 있습니다. Vercel: 클라우드 플랫폼으로, 개발부터 배포까지의 일련의 프로세스를 간소화하여 생산성을 향상합니다. Postgres Database: 객체-관계형 데이터베이스로, 안정적인 성능과 확장성을 제공합니다. redis: 인메모리 데이터 저장소로, 빠른 응답 시간과 유연한 구조를 제공합니다. GPT4 + 랭체인 (파이썬, 자바스크립트): 자연어 처리와 머신러닝을 위한 강력한 조합으로, 지능적인 서비스를 구현할 수 있습니다. tailwindcss: 유틸리티 기반의 CSS 프레임워크로, 반응형 디자인을 빠르게 구축할 수 있습니다. 파이어베이스(Firebase): 모바일 및 웹 앱 개발을 위한 종합 플랫폼으로, 백엔드의 복잡성 없이 다양한 서비스를 구현할 수 있습니다. 구글 애널리틱스(Google Analytics): 웹사이트 트래픽과 사용자 행동을 분석하여 마케팅과 사용자 경험을 개선할 수 있는 통찰력을 제공합니다. NextAuth.js: 인증 라이브러리로, 보안 강화와 사용자 관리를 간편하게 할 수 있습니다. 지금까지 언급한 다양한 도구, 언어, 프레임워크는 최근 6개월 동안 제 업무의 일상이었습니다. 이들 각각은 자체의 특성과 장점을 가지고 있고, 이를 적절하게 활용하면 프로젝트의 품질과 효율을 혁신적으로 높일 수 있어요. 하지만, 중요한 건 단순히 도구를 많이 사용하는 것만으로는 원하는 결과를 얻을 수 없다는 것입니다. 각 도구의 특성을 깊이 이해하고, 프로젝트의 실질적인 요구사항에 맞게 선택하고 활용해야만 진정한 가치를 발휘할 수 있죠. 도구는 그저 도구일 뿐, 그것을 어떻게 활용하는지가 성공의 실마리입니다. 여러분이 가진 도구는 여러분의 특별함을 반영합니다. 신중하게 선택하고 현명하게 활용하는 것이 중요하죠. 또한, '좋은 도구가 좋은 목수를 만든다'는 말은 없습니다. 정확히 말하면 '좋은 목수가 좋은 도구를 만든다'입니다. 여러분이 업무에 맞는 도구를 찾아, 이를 끊임없이 연습하고 잘 활용한다면, 여러분 역시 프로젝트에서 중요한 '목수'로 거듭나게 될 것입니다. https://link.gcoo.io/absnf6

UX팀이 왜 챗봇을 만들었을까? UX팀 리더의 이야기

안녕하세요, 지쿠의 UX 팀에 리더를 맡고 있는 꼬비입니다. 이렇게 다가가는 UX의 세계에서 제가 오늘 여러분께 이야기해 드릴 것은 바로 '챗봇'이에요. 여러분은 'UX팀이라면 왜 챗봇을 만들었을까?'라는 질문이 떠오르실 수도 있겠죠. 오늘은 그 질문에 대한 제 개인적인 답변을 공유하고자 합니다. 1. 챗봇 도입의 첫걸음, '왜?' 그 이유는 무엇일까요? 지쿠 팀에서는 사용자 경험(UX)을 항상 최우선으로 고려해요. 그래서 이런 질문을 가지고 출발했죠. '어떻게 하면 사용자들에게 더 깊이 있는, 개인화된 경험을 제공할 수 있을까요?' 이 질문에 대한 답을 찾기 위해, 저희는 사용자들과 더욱 가까이 다가가는 방법으로 챗봇을 도입하기로 결정했습니다. 챗봇은 단순히 정보를 전달하는 역할을 넘어, 사용자와 소통하고 그들의 일상에서 발생하는 여러 궁금증을 해결하는 역할을 합니다. 챗봇은 사용자와의 소통의 다리가 되어 주고, 그 과정에서 사용자의 니즈를 더욱 세밀하게 이해하게 돼요. 그리고 이런 이해를 바탕으로 사용자에게 더 나은 서비스를 제공할 수 있게 되는 것이죠. 이렇게 챗봇은 사용자와 더 가까이 소통하면서 UX를 향상시키는 중요한 도구가 되었습니다.. 2. 챗봇 선택의 이유, '왜 ChatGPT를 선택했을까요?' 사용자와 더욱 자연스럽게 대화하고, 개인화된 경험을 제공하기 위해 어떤 AI를 선택할지 많은 고민을 했어요. 그런 과정에서 저희가 선택하게 된 것은 바로 OpenAI의 ChatGPT였습니다. 이 언어 모델은 사용자와 다양한 주제와 맥락에서 대화를 이어나가는 능력이 있습니다. 그렇기에 사용자의 특정 요구에 맞게 반응하고, 개별적인 니즈를 반영하는 경험을 제공할 수 있었어요. 3. 디자인 선택의 이유, '왜 Tailwind CSS를 사용했을까요?' 사용자 경험의 핵심을 이루는 디자인, 저희는 Tailwind CSS를 선택했어요. 어떤 이유에서일까요? Tailwind CSS는 유틸리티 기반의 CSS 프레임워크에요. 이 말은 스타일을 직접 정의하고 적용하는 것이 가능하다는 거죠. 이는 디자인 과정에서 굉장히 중요한데요, 세밀한 사용자 경험 디자인을 위해서라구요. 또한, Tailwind CSS는 반응형 디자인을 손쉽게 만들어줍니다. 이를 위한 커스텀 디자인과 유틸리티 클래스의 조합은 빠르게 디자인을 반복하는 데 있어 큰 도움이었죠. 저희 팀은 재사용성이 높은 컴포넌트를 만들어 효율적으로 작업했습니다. 이 모든 것이 사용자에게 최고의 경험을 제공하기 위한 핵심 역량이 되었어요. 그래서, Tailwind CSS를 선택한 이유는 사용자 경험을 세밀하게 디자인하고, 효율적으로 작업할 수 있게 해주는 유연성 때문이었습니다. 이런 이유로, Tailwind CSS는 저희 UX 팀의 중요한 도구가 되었죠. 4. 선택한 기술 스택, '왜 React와 Next.js, 그리고 OpenStream을 선택했을까요?' 오늘 여러분에게 React와 Next.js, 그리고 OpenStream을 선택한 이유에 대해 말씀드리려고 해요. 이 세 가지 기술은 저희 챗봇 서비스를 만들면서 중요한 역할을 했습니다. 어떻게 이 세 가지 기술이 사용자 경험(UX)에 영향을 미쳤는지 자세히 알아보죠. 먼저, React는 사용자 인터페이스를 만드는 데 집중한 JavaScript 라이브러리에요. 이 라이브러리의 매력은 바로 컴포넌트 기반 개발을 가능하게 해주는 것이죠. 이는 UI의 재사용성과 유지 관리성을 높여주는데, 이게 바로 챗봇 서비스 개발에 중요한 역할을 했습니다. 특히 챗봇과 같이 사용자와 끊임없이 상호작용하는 서비스에서는 일관된 사용자 경험을 제공하는 것이 중요하거든요. 다음으로, Next.js는 React 위에 구축된 프레임워크로, 서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)과 같은 기능을 쉽게 구현할 수 있게 도와줍니다. 이러한 기능들은 챗봇이 사용자의 질문에 순식간에 반응하도록 하며, 이는 결국 사용자에게 더 나은 경험을 제공하게 됩니다. 마지막으로, OpenStream은 실시간으로 데이터를 효율적으로 전송하는데 활용되었어요. 챗봇과 사용자 간에 원활한 실시간 대화를 가능하게 하는데 이 기술이 큰 역할을 했습니다. 사용자의 질문에 즉각적으로 응답하면서도 데이터 효율성을 유지하는 데 필요한 기술이죠. 이런 방식으로 React와 Next.js, 그리고 OpenStream을 활용한 저희의 개발 방식은 사용자 중심의 챗봇 서비스를 제공하기 위한 이상적인 방법이었어요. 저희가 선택한 이 기술들은 서비스의 뛰어난 사용자 경험(UX)를 뒷받침하는 중요한 기반이 됩니다. 또한, 이런 기술 선택을 통해 저희 팀은 사용자에게 더 나은 경험을 제공하면서도 효율적으로 서비스를 개발할 수 있었다는 걸 알게 되었습니다. 이런 경험이 바로 저희가 더 나은 서비스를 만들기 위해 계속해서 기술을 탐색하고, 선택하는 동기가 되죠. 5. 새로운 경험, 챗봇과의 만남 챗봇 도입 이후로, 저희 팀에서는 사용자 경험이 어떻게 변화하는지 궁금해하셨을 기획자, 디자이너, 개발자 분들께 설명해드리고 싶어요. 언제든지 필요한 정보를 즉시 얻을 수 있는 이용자들의 모습을 보았어요. 그리고 이게 가능해진 것은 ChatGPT의 이해력과 반응성 덕분이라고 말씀드리고 싶네요. 이렇게 피드백을 통해 지속적으로 학습하고 발전하는 챗봇은, 사용자들의 질문과 대화를 통해 얻은 데이터로 더욱 똑똑해져요. 그 결과, 이용자들의 만족도가 크게 향상되고 있답니다. 이처럼 챗봇 도입은 사용자 경험에 새로운 차원을 추가했어요. 이런 변화를 통해 이용자와 더 가까워지면서, 그들의 니즈를 더욱 세밀하게 이해하며 더 나은 서비스를 제공할 수 있었답니다. 그렇기에 챗봇과의 만남은 저희에게도 새로운 경험이었고, 사용자 경험을 한 단계 더 향상시킬 수 있었다는 걸 알려드리고 싶어요. 6. 미래를 향해: LangChain 기술과 개인화된 서비스 지금까지 챗봇과의 만남이 사용자 경험을 어떻게 혁신적으로 변화시켰는지 나눠봤어요. 그런데 이야기는 여기서 끝나지 않아요. 챗봇 기술은 계속해서 발전하고 있으니까요. 그 발전이 사용자 경험을 더욱 다채롭게 만드는데 도움을 주고 있죠. 지금 저희 팀은 챗봇을 한 단계 더 진화시키기 위해 'LangChain' 기술의 통합을 모색하고 있어요. 이 기술은 사용자의 언어를 더욱 정확하게 이해하고, 그에 따른 반응을 만들어내는 능력을 가지고 있답니다. 이를 통해 챗봇은 단순한 질문에 대한 답변을 넘어서, 사용자의 문제를 더욱 정확하게 이해하고 해결하는 데 도움을 줄 수 있게 될 거에요. 그리고, 저희는 개인화된 서비스를 제공하도록 챗봇을 개발하고 있어요. 사용자의 현재 위치와 선호도를 기반으로, 지쿠의 전동 스쿠터나 전기 자전거로 이동할 수 있는 최적의 코스를 추천해주는 기능을 개발 중이랍니다. 이렇게 사용자는 자신만의 경험을 더욱 풍부하게 만들 수 있게 될 거에요. 이런 변화들이 지쿠와 챗봇의 미래를 향한 발전을 보여주는 예시랍니다. 이런 변화를 통해 지쿠는 사용자에게 더 나은 경험을 제공하기 위해 노력하고 있어요. 그 과정에서 기획자, 디자이너, 개발자 모두 함께 성장하고, 더 나은 사용자 경험을 제공하는 방법을 계속해서 탐색하고 연구하게 될 거에요. 그리고 저 역시 이 과정에서 제 역할을 다하며 지속적으로 성장하고 있답니다. 마무리: 챗봇 도입이 꽃피운 지쿠 UX팀의 성장 이야기 지쿠 UX팀에게 챗봇 도입은 확실히 엄청난 도전이었어요. 새로운 기술을 익히는 것부터 시작해서, 고객의 경험을 향상시키기 위한 다양한 방법을 탐색하는 과정까지, 이 모든 과정이 저희 팀의 성장에 중요한 발판이 되었습니다. 이 도전을 통해, 저희는 기획, 디자인, 개발의 모든 과정에서 사용자 경험을 어떻게 우선시하고, 이를 바탕으로 행동할 수 있는지를 배웠어요. 그래서, 챗봇 도입 프로젝트는 저희에게 그 이상의 의미를 지니게 되었습니다. 이 프로젝트는 저희가 사용자 중심의 문제 해결 방식을 어떻게 도입하고, 이를 통해 더 나은 경험을 사용자에게 제공할 수 있는지를 보여주는 대표적인 사례가 되었죠. 그리고 이 글을 통해, 저희가 왜 챗봇을 도입했는지, 그 과정에서 어떤 도구와 기술을 활용하고 어떤 고민들을 했는지를 공유할 수 있게 되어 기쁘네요. 이렇게 저희의 이야기를 여러분과 나누는 것 자체가, 저희 UX팀이 가장 중요하게 생각하는 '커뮤니케이션'의 일환이라고 생각해요. 앞으로도 저희 지쿠 UX팀은 사용자를 더욱 중심에 두고, 더 나은 경험을 제공하기 위해 끊임없이 탐색하고 도전할 거에요. 그리고 그 과정에서 저희 팀은 더욱 성장하고, 더 나은 제품과 서비스를 만들어내는 데 기여할 수 있게 될 것입니다. 이 모든 과정을 거치면서 저희 팀은 물론, 저 자신도 많이 성장했다는 것이 제게는 가장 큰 보람이에요. 그래서 이 글을 마치며, 여러분에게 소소한 제 경험을 공유하고자 했습니다. 이 모든 것이 제가 여러분에게 전하고 싶었던, 그리고 제가 가장 자랑스럽게 생각하는 이야기이자, 조금은 '비밀스러운' 성과라고 할 수 있겠네요. 이야기를 나눌 수 있어 기뻤습니다. 앞으로도 좋은 이야기로 다시 찾아뵐게요. 감사합니다! https://gcoo.io/kr/blog/ux%ED%8C%80%EC%9D%B4%EB%9D%BC%EB%A9%B4-%EC%99%9C-%EC%B1%97%EB%B4%87%EC%9D%84-%EB%A7%8C%EB%93%A4%EC%97%88%EC%9D%84%EA%B9%8C-%EC%A7%80%EC%BF%A0-ux%ED%8C%80-%EB%A6%AC%EB%8D%94%EC%9D%98-%EC%9D%B4%EC%95%BC%EA%B8%B0