마오지? Jira 일감을 크롬 확장앱에서! [기획자편]
안녕하세요, CJ온스타일 정보전략과 DevRel*을 맡고 있는 하늘입니다.
*Developer Relations : CJ ENM 커머스부문 기술 조직의 영향력을 키우고 성장을 지원하는 역할
온스타일 IT 담당자들은 [ DT:Lab ]이라는 그룹스터디 프로그램을 참여할 수 있는데요, 제가 그 [ DT:Lab ]을 만든 사람이면서 이번엔 직접 참여도 하게 되어 후기를 남기게 되었습니다. // 크루 영배님의 제안 : “하늘님이 만들었는데 한 번 참여해봐야 하지 않겠어요?” 에 넘어갔습니다. //
영배님의 아이디어로 모이게 된 저희는! Jira 일감을 한 눈에 볼 수 있는 브라우저 확장 앱을 만들었습니다. (명칭: 마오지) 🔍이번 기획자편에서는 프로젝트 진행 과정과 서비스 기획 관점 위주로 포스팅하겠습니다. [개발자편], [설계자편] 에서는 구현 관련된 이야기를 자세히 보실 수 있습니다.
디티랩에 참여하신 분들께 그룹스터디를 기술블로그 포스팅으로 마무리하면 좋겠다 홍보하던 저의 모습이 아련하게 떠오르네요. (언행을 조심하자. ㅎ)
그럼 시작합니다.
마오지 프로젝트 소개
- Jira 일감을 한 눈에 볼 수 있는 서비스 만들기
(1부터 100까지 저희 손으로 한땀한땀 만들었습니다.) - 새로 생성된 open 상태의 일감을 놓치지 않게 돕는 것이 서비스의 목적. 나아가 사내 Jira를 활용한 협업 문화가 확산되기를 바라며!
- 제공 방식 : 웹 브라우저 확장앱
- 서비스 이름 : 마오지 my open jira
- 서비스 대상 : CJ ENM 커머스 사내 구성원
- 그룹스터디 기간 : 6주
우선 결과부터 보여드릴게요.
마오지 프로젝트 이렇게 했어요.
그룹스터디 운영 담당자로서 원했던 이상적인 프로세스 그대로! 저희가 모범 사례를 몸소 실현해 보았습니다.
- [07/25-] 마오지 프로젝트 준비
크루 확정 • wbs 작성 • 스터디 목표 수립 • 팀 그라운드 룰 설정 • 스터디 방식 설정 - [08/03–09/14] 마오지 프로젝트 진행 (6주간)
서비스 컨셉 구상 – 화면 구성 — 상세 기획 – 화면 디자인 – 설계(Jira API-Chrome extension) – 마크업 개발 – 기능 개발(JavaScript, JQL) – 테스트 – 설치방법 및 소개서 작성 - [09/15] 마오지 서비스 런칭
- [10/06] 마오지 스터디 Review
1. 마오지 프로젝트 준비
◾ team 마오지 구성원
디티랩은 본업과 무관하게 다양한 영역을 스터디 해볼 수 있다는 장점이 있습니다. 이렇게 저희 team 마오지가 모였고, 사내 디자이너 한 분을 더 섭외하여 디자인을 요청드렸습니다!
◾ team 마오지가 함께 스터디하는 방법
그라운드 룰
- 어떤 질문을 해도 비웃지 않는다.
- 실수는 조용히 모른척 해준다.
- 업무 영역은 마음껏 넘나든다!
6주 동안 우리는
WBS에 맞게 각자 역할을 수행하고 매주 목요일 오후 3시에 만나 리뷰한다.
6주 후 우리는
마오지 서비스를 런칭한다! (설치파일 배포, 전사 공지)
이미 스터디가 끝나고 이 글을 쓰는 지금, 처음에 설정 했던 모든 그라운드 룰과 서비스 런칭이라는 목표를 모두 지킨 저희 팀에 한번 더 감동이 몰려오네요..♡
2. 마오지 프로젝트 진행(6주간)
컨셉 구상 – 화면 구성 — 상세 기획 – 디자인 – 앱 설계 – 마크업개발 – 기능 개발 – 테스트 – 설치방법 및 소개서 작성
◾ 프로젝트 관리
저는 우선 프로젝트 관리를 위해 컨플루언스에 기록을 시작했습니다. 단계 별로 페이지를 만들어 큰 틀을 보며 놓치지 않게 챙길 수 있었고, 사소한 것들이 정해질 때마다 내용을 채워나갔습니다. 그리고 6주간 위클리미팅을 할 때 미팅노트를 생성하여 미리 이야기할 것을 정한 뒤 만났고, 미팅 후 정해진 것과 해야할 일을 적었습니다.
◾ 화면 구성
디자이너 없이 진행하던 중이라 제가 figma로 화면 초안을 미리 그려두었습니다. 저도 figma를 처음 사용해 보았는데 구글 계정으로 쉽게 로그인 하고 무료로 시작할 수 있습니다.
화면을 처음 그려보는 사람은 화면 여백이나 화면 계층에 따른 레이어와 섹션 구분같은 것이 중구난방 될 수 있는데요. (제 소개입니다. ㅎㅎ) 첫 시작이 막막했으나 AI 플러그인 [Wire frame designer] 를 사용하여 기본적인 UI를 자동으로 템플릿을 제공받은 뒤 수정하는 방식으로 진행하니 한결 수월했습니다.
◾ 디자인
전체 사이즈를 스크롤이 생기지 않는 600px로 조절하고 전반적으로 둥글둥글 깔끔해 졌습니다! 너무 커다랗던 글씨들이 보기 좋게 조정되고 특히 Jira 리스트를 조회할 때 보여지는 카드는 중요한 정보와 덜 중요한 정보의 색상/크기를 다르게 하여 정리해 주셨습니다. 심미성 뿐만 아니라 UX 측면에서 정보의 중요도까지 디테일하게 고려해야 한다는 점을 배웠습니다.
💜디자이너 윤구님 감사합니다!
◾ 서비스 기획
마오지의 각 화면 별로 상세 기능을 정의했습니다. 가능한 확인할 수 있는 JQL 조건은 모두 작성하였습니다. 본업과 달라 힘들었던 것은 ‘기획서를 이런 구성으로 써도 개발자가 익숙하게 알아볼까?’ 고민이 된 점. 그리고 스피너, 토글, 푸터, 네비 등 너무 간단하지만 제가 평소 쓰지 않는 UI 용어들을 반신반의 하며 작성하느라 난항이기도 했습니다. (지금 생각해보니 주변 프론트 기획자에게 자문을 구할 걸 그랬네요 ㅠㅠ) 바로 프로젝트로 진행 하다보니 이 분야의 기초 지식을 공부하지 않은 채 무작정 몸으로 맞선 것 같아 아쉽다는 생각도 듭니다.
기획은 다 기획 아니야?
아니야, 내가 느낀 서비스 기획의 다른 점은
// 여담이지만 평소 개발자들과 이야기하면 조금 아쉬웠던 부분은 제가 서비스 기획자라고 생각한다는 것입니다. 개발자도 여러 분야가 있듯이 기획자도 마찬가지인데 말이죠. 하긴 저도 개발자든 디자이너든 기획자든, 결국 어떠한 문제를 해결해 나가는 일을 하기 때문에 모두가 기획자라고 생각하기도 합니다. //
아무튼 저의 본업은 정보전략으로 IT 조직이 잘 운영될 수 있도록 프로세스를 만들고 정착 시키는 일을 합니다. (IT 예산 관리/IT 규정 관리 등) 이번에 마오지를 만들면서 평소 하던 기획 업무와 달리 서비스 기획은 훨씬 세부적인 것에 집중해야 했습니다. 왜 그렇게 생각했는지 더 적어보겠습니다.
◾ 마오지 서비스를 기획하며 내가 잘못한 점
토스 기술블로그를 보며 눈에 띄었던 것 중 하나가 ‘내가 한 일 중 가장 비효율 적이었던 일’을 쓰더라구요. 실패를 성공의 밑거름으로 삼기 위해 저도 따라해보겠습니다.
- 첫번째 반성. 이미 기획서에 있는 내용인데 개발자가 따로 고민해서 이러이렇게 하겠다는 말을 듣게 된 사건
(다시 보니 안써놓지 않았어요..! 하지만 기획서에 써놨단 말도 하지 않았다는 것이 함정..) 이번 계기로 회의와는 별개로 기획서를 업데이트할 때마다 짚고 넘어갔어야 했구나 인지하게 됐고, 컨플루언스에 멘션해서 알려주기 시작했습니다.
- 두번째 반성. 모호한 상태 값 정의로 인한 혼선
처음에 오픈/진행중/끝! 상태값을 정의할 때는, 말그대로 jira status가 open인 것을 마오지의 [ 오픈 ] 탭, Jira status가 completed인 것을 마오지의 [ 끝! ] 탭에, 위 status 를 뺀 것이 [ 진행중 ] 탭에 나오도록 작성했었습니다.
하지만 개발자 은지님이 completed 말고 취소도 있고, 해결됨도 있더라며 최종 확인 요청을 하셨고, 제가 상태 값들을 누락하지 않고 다시 표로 정의해 드리기로 하였습니다.
그래서 최근 5주간 모든 이슈를 엑셀 추출해 보니, 제가 몰랐던 이슈 유형들이 많아 훨씬 다양한 status가 존재했고 Jira에서플로우를 보면 회색/하늘색-파란색/초록색으로 표시되는 특정 카테고리가 있다는 것을 알게 되었습니다.
statusCategory in (“To-do”) //오픈
statusCategory in (“In Progress”) //진행중
statusCategory in (“Done”) //끝◾ 서비스 기획을 해보며
기획자인 내가 서비스의 가장 작은 단위까지 들여다 보고 1부터 100까지 확정 짓고, 글로 명시하며, 그 과정에서 개발자들을 설득할 줄도 알고, 꼼꼼히 설명하며 소통하는 것도 필요하다 느꼈습니다. 이러한 반성을 통해 다음에 또 서비스기획을 하게 된다면 더 잘하고 싶다는 생각이 듭니다. (내가 또 무슨 입방정을…)
마오지 제작 비하인드
개발자는 이해 못하는 귀여움을 우겨보았습니다.
링크드인에서 우연히 우아한형제들의 사내시스템을 보게 되어 ‘우리 마오지에도 재치있는 요소를 꼭 반영해야겠다’는 의지가 생겼습니다. ‘마오지’도 IT 담당자들의 업무 시스템이기 때문에 나름 문화를 만드는 요소 중 하나라고 생각하였기 때문입니다.
◾ 마오지 UX Writing
그래서 담당자의 이름을 넣어 대화하는 말투로 각 상태 별 격려 문구를 넣었습니다. 마오지 서비스의 가장 큰 목적은 일감을 놓치지 않게 하는 것인데, ‘상태 별로 일감 여깄다!’로 끝이 아니라 ‘그래서 그 다음은?’ ‘이 일감들을 어떻게 하라고?’ 까지 명확히 말해주고 싶었습니다.
그리고 UX Writing도 고려하여 청유체로 문구를 다듬었습니다. (시작해 보세요 → 시작해 볼까요?)
이 문구는 맨 밑에 넣거나 아예 빼자는 의견도 있었습니다. 어떻게 보면 정보의 중요도를 객관적으로 따졌을 때 가장 쓸 데 없는 부분이니까요. 그 땐 제가 위에 작성한 대로 기획 의도를 제대로 설명하지 못한채 제 첫 기획과는 다르게 응원 문구가 일감 리스트 섹션 안에 들어갔었습니다.
그렇지만 [ 끝! ] 탭에서 1주일/1개월/… 기간 필터를 선택할 때 count 숫자만 바뀌고, 리스트는 최신 순이라 변화가 없기 때문에 아무런 반응이 없어 보이는 사태가 벌어졌습니다. 그래서 문구를 제일 위에 올리고, 그 다음 건수를 보여주고, 마지막으로 리스트를 보여줘야 시선의 흐름이 맞다고 건의하였고 비로소 지금의 모습대로 반영된 것입니다!
은지님께는 죄송하지만 마크업 변경을 요청했습니다. (프론트 개발자가 아니라 오래 걸렸지만 결국 다 해내신 은지님..)
처음부터 제가 컨셉에 대한 설득도 제대로 했었다면 좋았을 것 같다는 반성을 또 하게 되었습니다. (토스의 이야기를 보여줬더라면 좋았을텐데! ← 진짜 재밌어요)
마오지 제작 비하인드-계획 대비 구현 300%
◾ 뒤늦은 User Research
처음에 아이디어 스케치를 보고 이 정도면 금방 할 수 있을 것 같다고 생각했습니다. 그런데 크루들이 각자 본업 역할에 따라 jira 사용 관점도 달라서 처음 생각했던 것보다 훨씬 많은 기능들이 생겨났습니다.
플랫폼을 운영하시며 새로운 요청이 접수되는 경우가 많을 영배님은, 본인이 담당자인 open jira를 바로 확인하는 게 가장 필요했을 것입니다. 그렇다면 처음에 생각했던 마오지의 모습으로 충분합니다.
그런데 개발자와 디자이너는 특정 과제의 중간 단계에서 jira를 이관 받는 경우가 더 많을 것입니다. 그래서 어떤 상태를 기본으로 설정할 것인지 옵션 페이지에 기능을 넣었습니다.
그럼 기획자는? 개발자나 기획자에게 담당자를 넘겼을 때 진행상태를 보고싶을 수 있습니다. 그래서 내가 요청한(reporter=나) 일감과 지켜보는(watcher=나) 일감도 볼 수 있게 토글 형태로 버전을 추가했습니다. 요청한 일감은 자동으로 watcher에 들어가기 때문에 더 큰 개념인 ‘지켜보는 지라’가 조회 되도록 했습니다.
Jira를 가장 자주 사용하는 개발자 은지님의 의견들이 곧 User Researh 결과가 되어 마오지의 특장점 기능들이 생겨났습니다! (최고) 게다가 디자이너 윤구님의 아이디어로 검색 기능도 추가되며 정말 알찬 마오지로 진화했습니다 🗯🖤
◾ 드디어 테스트!
생각보다 많은 시행착오를 거치고, 처음보다 훨씬 많은 기능들이 적용된 마오지가 드디어 완성되었습니다.
◾ 마오지 서비스 소개 카피라이팅
제가 이번 디티랩을 참여하게 된 계기는 ‘하나의 서비스를 만드는데 a부터 z까지 경험해 보기 위해서’ 였습니다.
마오지가 아주 작은 서비스지만, 앞서 언급한 것 처럼 일하는 방식의 변화를 위한 툴, 문화를 만드는 장치로써 멋있게 소개하고 싶었습니다.
그래서 서비스 런칭 공지 할 때 제일 처음 무엇을 보여줘야 할까? 를 고민했습니다. 우선 평소 자주 쓰면서 괜찮다고 생각한 앱들의 소개 페이지를 둘러 보며 카피라이트 문구를 스크랩해 보고, 마오지의 특장점, 마오지는 무슨 서비스다 라고 정의할 수 있는 말들을 생각나는대로 적어갔습니다.
“찾아볼 필요 없이 바로
나의 모든 일을 마오지에서 한 눈에”
몇 시간을 고민한 끝에 카피 문구를 완성했고.. 주말 동안 figma로 뚝딱 거리며 메인 이미지(gif)를 완성 시켰습니다.
- 메인 이미지(gif) 제작 방법 : figma에 브라우저 창 이미지를 만들어 3개를 복붙합니다. 그 위에 오픈/진행중/끝! tab별로 하나씩 위에 올립니다. 3개의 이미지를 추출한 뒤 gif 메이커 사이트를 활용해 위와 같이 움직이는 메인 이미지를 만들었습니다.
- 설치파일 배포 방법: 사내에서 사용 중인 클라우드 협업 플랫폼 MS Sharepoint에 올려 두었습니다. 서비스 소개 자료 PPT 작성 시 메인 이미지 위에 [마오지 다운로드] 도형을 만들어 Sharepoint 접속 링크를 하이퍼링크로 적용하였습니다.
3. 마오지 서비스 런칭
◾ 마오지 서비스 소개서 제작
마오지가 오픈을 알리며 안내해야 할 것
- 서비스 소개 (왜 만들었어? 뭐가 좋아?)
- 설치방법 (그럼 어떻게 써?)
- 사용방법 (어떻게 활용해?)
처음엔 이것들을 컨플루언스에 적다가 어차피 그림 설명이 필요해서 ppt를 쓸 수밖에 없었고 결국 서비스 소개서로 완성 시켰습니다.
Jira를 활용한 과업 관리와 협업 문화가 확산되기를 바라며 활용 가이드도 함께 작성했습니다. 마오지에서 최근 1주일 동안 끝낸 나의 Jira를 확인하여 컨플루언스에 주간보고 작성하기, PMO/기획자/팀장/개발자 등등 각 역할 별로 어떤 옵션을 설정하고 어떤 화면을 주로 확인하면 좋을 지 등등의 가이드 내용을 넣어 완성했습니다.
◾ Jira를 사용하지도 않는 전사 구성원 대상으로 공지
드디어 마오지 OPEN 📢 저희는 1000명이 넘는 CJ ENM 커머스 구성원 대상으로 전사 공지를 했습니다. IT 부서가 아닌 MD, PD, Staff 부서 등 현업 부서에서는 Jira를 사용하지 않지만 DevRel 담당자로서 기술 조직 사내 브랜딩 일환으로 마오지 공지를 통해 우리 IT 담당자들이 어떻게 일하고 있는지 보여줄 수 있는 기회라고 생각했습니다.
공지 후 많은 개발자 분들이 정말 편리하다는 후기를 댓글로 남겨주셔서 뿌듯했어요 :D
4. 마오지 스터디 Review
◾ DT 타운홀미팅 발표
처음 목표했던 대로 저희는 서비스 런칭을 마친 후, 타운홀미팅에서 스터디 과정과 결과에 대한 리뷰를 진행했습니다. 크루 영배님께서 엄청 재밌게 (?) 마오지를 소개해 주셨고, 특히 마오지에 대한 내용 뿐만 아니라 [DT:Lab] 스터디 문화가 더 활성화 되길 바라는 마음으로 전파해 주셨습니다.
[DT:Lab] 이야기를 덧붙일게요. 스터디 프로그램에 참여한 이상 정해진 기간 내에 목표를 완수해야 하기 때문에 제 경우엔 수요일 저녁마다 회사에 남아서 하거나 주말에도 힘을 쏟느라 힘들지 않았다면 거짓말입니다. 하지만 개인적으로 진행했다면 느슨해 질 수 있던 것을 “몰입”하여 실행하고 끝낼 수 있어 좋았습니다.
이렇게 저희 Team 마오지는 타운홀미팅 발표를 마치고, 기술블로그까지 연재하며 스터디를 마무리합니다.
하고잡이가 모이면🖤
- 불편한 Jira 알림을 Extension App으로 만들 생각을 하다니 ! 그리고 주니어들과 함께 재밌는 스터디를 이끌어 주신 영배님
- 본업도 아닌 프론트 개발과 백엔드 개발 기한 맞춰 다 끝내고 기능 추가까지.. 재밌을 것 같아 지원했는데 정말 넘치게 즐기신 은지님
- 세상에서 가장 해로운 벌레는 ‘대충’인 기획자 하늘, 나 ..!
- 숙련된 스킬로 뚝딱 마오지의 퀄리티를 올려주신 디자이너 윤구님
자발적으로 모였기에 일의 지연이 없고, 오히려 만날 때마다 열정이 타올라 처음 생각했던 것보다 훨씬 많은 기능을 넣어 완성도를 높인 마오지! 정말 애자일 그대로를 체험한 것 같습니다.
이번 계기로 협업하며 아웃풋을 내는 재미를 맛보게 되었어요. 저에게 2023년을 떠올리면 이번 마오지가 두번째로 생각날 것 같습니다. (죄송해요 첫번째는 M365 & AIP 도입 프로젝트입니다. ㅎㅎ)
긴 글 읽어주셔서 감사합니다!
[ DT:Lab ] 팀 마오지, CJ ENM COMMERCE DIV.
