지쿠 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개월 동안 제 업무의 일상이었습니다. 이들 각각은 자체의 특성과 장점을 가지고 있고, 이를 적절하게 활용하면 프로젝트의 품질과 효율을 혁신적으로 높일 수 있어요.
하지만, 중요한 건 단순히 도구를 많이 사용하는 것만으로는 원하는 결과를 얻을 수 없다는 것입니다. 각 도구의 특성을 깊이 이해하고, 프로젝트의 실질적인 요구사항에 맞게 선택하고 활용해야만 진정한 가치를 발휘할 수 있죠. 도구는 그저 도구일 뿐, 그것을 어떻게 활용하는지가 성공의 실마리입니다.
여러분이 가진 도구는 여러분의 특별함을 반영합니다. 신중하게 선택하고 현명하게 활용하는 것이 중요하죠.
또한, '좋은 도구가 좋은 목수를 만든다'는 말은 없습니다. 정확히 말하면 '좋은 목수가 좋은 도구를 만든다'입니다. 여러분이 업무에 맞는 도구를 찾아, 이를 끊임없이 연습하고 잘 활용한다면, 여러분 역시 프로젝트에서 중요한 '목수'로 거듭나게 될 것입니다.
