마오지? Jira 일감을 크롬 확장앱에서! [개발자편]

안녕하세요, CJ 온스타일 상품서비스개발팀에서 근무한지 1년을 막 넘어선 개발자 최은지 입니다.

저희 팀에서는 CJ 온스타일의 상품 상세를 그리기 위한 API 제공부터 상품 정보를 관리하는 어드민 개발 등 상품과 관련된 업무를 수행하고 있는데요,
오늘은 제 업무와는 조금 다른 이야기를 해보려 합니다.

마오지? Jira 일감을 크롬 확장앱에서! [ 기획자편 ], [ 설계자편 ] 에서도 언급되었듯이, 온스타일 IT 담당자들은 [ DT:Lab ] 이라는 그룹스터디 프로그램에 참여할 수 있는데요.

[ DT:Lab ] 을 통해 초기 아이데이션 부터 개발, 마지막 서비스 오픈까지 개발자로 참여했던 경험을 공유하고자 합니다.

(전문적인 기술을 다루기보다는 개발 과정의 내용임을 참고부탁드립니다.)

그럼 START~

미션💡 JIRA Chrome Extension 개발하기

저는 평소 스터디에 참여하는 것을 좋아하는 편이라, 회사에서 참여할 수 있는 그룹스터디 프로그램이 열림과 동시에! 참여했었습니다.

(이번이 2회차) 1회차에는 디자인 패턴에 대해 공부하고는 했었습니다.
관련 서적을 선정하고, 챕터 별로 담당을 지정하여 가르쳐 주는 방식으로 진행했었어요.

1회차가 끝나고 약 2개월 뒤 2회차를 시작한다는 소식을 전해들을 수 있었습니다.

둘러보며 2회차 설명회를 듣고 있었는데요.
(이때까지는 정말 참여할 생각이 없었는데..)

두둥🙃 새로생긴 미션형 스터디

미션형 스터디가 새로 생겼더라구요?

JIRA와 연관된 주제로 크롬 익스텐션을 만드는 것이었습니다.
(아이디어 제공자 JeonYB 님께 감사드립니다 😊)

평소에 일감 관리를 하며 대시보드, 칸반보드 등을 활용해왔지만, 접속을 해서 확인해야 하는 불편함이 있었기에 주제가 흥미롭게 다가왔습니다.
내가 처리할 일감을 브라우저에서 확인할 수 있다면 편리하잖아요??

또한, 새로운 서비스를 만들어가는 과정이 재미있을 것 같아 참여란에 이름을 남겨두었습니다.

재미있을 것 같아 == 이미 참여 완료

모집 기간이 지나고, 동일한 목표를 가진 3명이 모여 팀이 만들어졌습니다.

마오지가 뭔데?

[ 기획자 ], [ 설계자 ] 편에서도 설명되었지만

“크롬 익스텐션에서 나와 관련된 일감을 오픈, 진행중, 끝 상태에 따라 확인할 수 있고, 색상이 변하는 정도의 알림을 받을 수 있는 확장 프로그램”

정도로 정의하겠습니다.

추가로 오픈, 진행중, 끝 상태에 따라 내가 볼 수 있는 문구들이 달라지고, 끝난 이슈는 필터링과 정렬이 되어야하고, 일감들의 코멘트를 모아볼 수 있어야하고, 기타 설정이 가능한 옵션 페이지도 있어야 합니다.

+ 검색도 되어야하죠.
+ 내 이슈만이 아닌, 지켜보는 이슈도 확인 가능해야 합니다.
+ 업데이트 된 내역이 있으면 브라우저에서 알림까지! 주어야해요.

할일이 많네

나에게 일감이 할당된 사실 조차도 모르고 있는 경우들이 있을 수 있는데요. 마오지와 함께라면 브라우저를 사용하고 있다면 언제든 알 수 있을 것 입니다.

“나에게 일감이 할당되었으니 확인해봐” 라고 확장프로그램이 알려주는 것이죠.

자 이제 무엇을 해볼까

팀원들이 모이고, 주기적인 미팅을 가지게 되었어요.
미팅을 하며 팀명도 정하고 필요한 기능들에 대한 아이데이션도 시작되었죠.

저는 평소 지라 일감의 댓글을 모아보고 싶다는 생각을 가지고 있어 댓글 모아보는 기능을 제안하기도 하고, 그 외에 필요한 것들을 제안했어요.

기획과 개발의 관점에서 필요한 요구사항들을 나열하다 보니, 초기 생각했던 서비스보다 많은 기능을 가진 서비스가 기획되고 있었습니다.

(마오지 정의가 길어진 이유)

또한, 욕심은 끝이 없어 디자인도 이쁘게 만들려고 하였으나..

저희 팀원의 구성은 다음과 같습니다.
Team 마오지 (3) = 기획 (1) + 서비스 아키텍쳐 (1) + 백엔드 개발자 (1)

마크업을 해왔던 팀원이 없는 관계로 자급자족 해야하는..

구글과 함께라면 뭔들.jpg

마크업은 저희끼리 해보기로 하고 디자이너 분까지 섭외되었어요.

초기 하늘님의 피그마 시안을 거쳐, 디자이너 윤구님의 멋있는 디자인이 입혀졌고 서비스의 대략적인 모습이 나오기 시작했답니다.

마오지 초기 시안

개발 START 🚗

기획서가 나오고, 디자인이 어느정도 나오게 되면서 개발을 시작했어요.
오픈일을 정하고, 요구사항 도출을 시작했습니다. TASK를 크게 나누어 보았어요.

TO DO LIST

• 마크업
• 응원 문구
• 오픈, 진행중, 끝 상태에 따른 일감 조회
• 끝난 이슈 필터링 / 정렬
• 검색
• 코멘트 조회 (내 일감의 코멘트, 지켜보는 일감의 코멘트)
• 옵션
• + @ @ @ 필요하다고 생각되는 기능들

구현을 위해 주어진 구조를 활용해야 했습니다.
→ 참고 : 마오지? Jira 일감을 크롬 확장앱에서! [설계자편]

(초기 구조를 설계해주시고 공통 모듈을 제공해주셔서, 개발을 굉장히 수월하게 할 수 있었어요.)

화면을 노출하기 위한 로직을 하나의 파일에 담기에는 주어진 요구사항들이 많기에, 코드를 어떻게 분리할 수 있을지 고민했고 재사용 될 수 있는 부분들을 찾았어요. 재사용이 가능한 부분들은 컴포넌트로 분리할 수 있도록 했습니다.

각각의 탭은 JIRA 일감의 상태에 따라 구분되는데요,

오픈 : statusCategory = “To Do”

진행중 : statusCategory = “In Progress”

끝 : statusCategory = “Done”

본인이 담당자로 할당되어 있는 일감의 진행 상태에 따라 분류됩니다.

JIRA API를 통해 받아온 결과값의 데이터만 바뀌고, 화면에는 동일한 로직으로 그려지기에 분리했습니다. 컴포넌트 내에서 사용되는 데이터는 각각의 컴포넌트에서 관리됩니다.

댓글도 동일하게 위와 같은 영역의 코드는 분리됩니다.

컴포넌트 안의 데이터로 처리되는 로직들은 컴포넌트 내부 로직에 작성함으로써 코드를 분리할 수 있었습니다.

이는 추가 기능 확장에 있어 용이했는데요,

초기 기획 시 검색 후 엔터를 누르게 되면 JIRA에서 제공하는 필터 페이지로 이동하도록 기획 되었습니다.

하지만, 오픈, 진행중, 끝 일감 조회 화면과 검색 API의 구조가 유사했고, 데이터만 바꿔주면 화면 로직은 동일했기에 검색 시 일감 리스트를 화면에 뿌려줄 수 있도록 변경했습니다. 이로써 편의성을 증대시킬 수 있었어요.

개발보다 어려운건 커뮤니케이션 💬

팀 마오지는 매주 주간회의를 통해 진행상황을 공유했습니다.

매주 회의했어요 커피와 함께

주간회의를 진행할 시에, 영배님께 프로젝트 구조와 관련한 설명들도 들을 수 있었답니다.

• Background <-> BackgroundHandler <-> Popup
• Handler를 통해 주고 받기
• 브라우저와 크롬 엔진에서 사용하는 것 각각 분리 필요

이후 각자의 역할에 맞게 코드가 작성되었습니다.
+ 추가로 자주 쓰이는 공통 모듈들까지 제공해주셔서 개발을 수월하게 할 수 있었어요.

또한, JIRA API 호출 시에

fields를 파라미터로 전달하게 되면 필요한 데이터만 호출할 수 있다는 점도 함께 알려주셨어요. (문서를 보다가 놓친 부분)

덕분에 불필요한 데이터 fetching을 줄일 수 있었습니다.

개발을 진행할 땐

Confluence를 통해 업무를 분배하며, 각자의 진행 상황과 남은 업무 리스트를 공유했어요. 수정이 필요할 경우 하늘님이 멘션을 달아 주셔 즉시 확인이 가능했습니다.

문서에 정리하며 필요한 요구사항을 요청했고, 바로바로 반영하며 스피디한 서비스 제작 과정을 경험할 수 있었어요. (이것이 바로 애자일…??)

오픈 일주일 전 추가된 “지켜보는 지라”

초기 목표했던 기능 개발이 완료되었는데요, 저희가 사용할 서비스를 만드는 것이기에 각자의 요구사항이 추가로 계속 생겨났습니다ㅎㅎ

(일을 해야하는 사람들이 끊임없이 일을 만들어)

공통적으로 요구된 기능은 “내가 담당자일 경우” 만이 아닌
“내가 리포터인 경우” or “내가 지켜보는 일감인 경우”
를 보고 싶다는 니즈였고, 지켜보는 일감을 볼 수 있는 페이지를 만들기로 했어요.

지켜보는 지라

짜잔~ 버튼이 생겨나게 되었습니다.

저는 마크업을 하는것에 익숙치는 않기 때문에, 좌우 토글되는 버튼과 같은 UI는 GPT의 도움을 받아보기로 했어요.

양옆으로 움직이는 input을 만들어줘. 백그라운드 색상은 파란색이고 안에 하얀 버튼이 좌우로 토글 됐으면 좋겠어.

모호한 문장을 전송하니 위와 같은 버튼을 만들어 주었습니다. GPT의 결과물을 감사히 받아 커스터마이징을 할 수 있었답니다.

버튼은 안움직이게 고정시키고, 디자인은 마오지 디자인에 맞게 입혀주면 완성~

나의 지라와 지켜보는 지라의 상태값은 아래와 같습니다.

나의 지라 : assignee = currentUser()
지켜보는 지라 : watcher = currentUser()

버튼을 클릭할 시에는 상태값이 바뀌게 되며, 요청하는 JQL 문이 달라지게 됩니다.

개선이 필요해

짧은 시간 내에 빠르게 만들려다 보니, 서비스에도 부족한 부분이 많이 보였어요. 첫째로,

3g로 실행.gif

API 응답 속도가 느린 경우, 위와 같이 요소들이 나타나게 되는데요.

개발을 할 때에는 인지하지 못했던 점인데, 하단의 “X개 중 X개 표시” 와 같은 문구가 나중에 나오는게 불편(?) 하더라구요. (개인 취향 입니다 🥲)
개선을 하면 한번에 초기화면이 뜨게 할 것 같습니다.

그리고, 기능 구현에만 초점을 두다보니 불필요한 렌더링이 많이 발생되었어요. 스터디의 목적인 만큼 이런 부분들에도 신경을 써봤으면 좋았겠다는 생각이 들었습니다.

두번째, 초기 기획과 다르게 개발을 진행하며 추가된 기능이 많아서 설계가 급하게 된 부분이 있었어요. 처음 설계할때는 생각하지 못했던 기능을 추가해야 하는데..

기능을 추가하고 싶은데, 근데 이제 오류가 생길 것만 같았어요

이런 상황으로 추가기능이 80%정도만 구현된 것 같다는 느낌을 받았습니다.
부족하다고 생각되는 기능들은 추후 더 보완하면 좋겠다고 생각했어요.
ex) 탭을 움직여도 유지됐으면 하는 상태가 초기화가 되니 유지되도록 보완.

마지막으로, 소스코드 리팩토링을 하고 싶어요.
빠르게 기능을 만드는 것이 목적이었기에, 코드 작성 시 더 고민 할 시간이 있었으면 하는 아쉬움이 있었습니다. 추후 유지보수를 위한 코드 재정비의 필요성을 느꼈어요.
JIRA를 사용하는 다양한 사람들의 편리한 일감 관리를 위한 기능 추가가 원활하도록 확장성 있는 코드 작성이 필요할 것 같고, 기능을 마구 추가할수 있도록 보완해 나가면 좋겠다는 생각이 들었습니다.

마무리🔥

약 6주간의 짧은 시간이었지만, 기획 개발 서비스 배포까지 전반적인 내용을 경험할 수 있었기에 기억에 남는 스터디 였던 것 같습니다.

오픈 공지에 포함되었던 문구와 같이 “각자의 일감을 효율적으로 관리하고 싶다” 라는 목표로 마오지 서비스 오픈까지 오게되었습니다.

[기획 + 테스트 + 공지글 + 가이드 + @] 산더미같은 일들을 처리하며 이끌어주신 하늘님.
아이디어 제공에 설계에 개발까지 역시 일당백 영배님.
갑작스런 부탁에 기꺼이 응해주시고 멋있는 디자인 제공해주신 윤구님.

열정적으로 참여해주신 팀원분들께 감사의 말씀을 다시 한번 드립니다.

만들 기능이 많아지면서, 주말에 시간을 할애해야 했지만😂 누군가가 편리하게 사용한다면 그것으로 만족합니다😊

마오지를 사용해주고 계신 분들께 너무너무 감사드리며, 별거 아니지만 짧은 글 읽어주신 분들께 감사드립니다.

역시 마지막은 마오지 소개.gif

[ DT:Lab ] 팀 마오지, CJ ENM COMMERCE DIV.

취향공감 라이브쇼핑 - CJ ONSTYLE