Jetty Chart 프로젝트 회고 (차트 라이브러리 개발)

작업 기간
2023.10.10 ~ 2023.11.17

팀원 구성
개발 6명

기술스택
프론트엔드 : React, Nextjs, CSS
협업 및 배포 툴 : figma, gitlab, Notion, mattermost, jira

후기
개발을 하면서 차트 라이브러리를 많이 사용했었습니다. 하지만 원하는 기능이 없거나, SVG, Canvas 중 하나만 지원하거나, 디자인이 마음에 안드는 경우가 있었습니다. 이러한 부분들을 개선하고자 차트라이브러리 개발을 기획하였습니다.
오픈소스로 개발을 진행하며, 누구나 기여할 수 있도록하며, NPM에 배포하여 실제 사용자들을 받는 것을 첫번째 목표로 하였습니다. 최대한 다양한 기능들을 지원 하도록 개발을 하였으며, NPM에 배포한 후 주간 1400회의 다운로드를 기록하는 성과를 가질 수 있었습니다.

맡은 부분
파이, 도넛 차트 개발
SVG를 처음 사용하였으며, 특정한 곡선을 그리기 위해서는 여러 어려움이 있었습니다.
도넛 조각은 각각의 좌표를 직선 또는 곡선으로 이어서 하나의 조각을 만들게 됩니다. 각 조각의 모퉁이를 둥글게 하는 기능에서 계산이 복잡해졌습니다. 최대 둥글기는 몇인지를 찾기 위해서 현재 조각의 너비를 계산하여야 했으며, 다음 좌표를 구하기 위해서 두원과 직선의 접점을 구하는 등의 여러 수식을 계산하였습니다. 이 과정에서 좌표 (x,y)가 0에 가까운 경우, infinity와 NaN이 발생하는 문제가 생겼습니다. 그래서 좌표를 N도 기울인 위치로 대체하여 계산 결과를 얻어서 사용하는 방식으로 문제를 해결하였습니다.

파이, 도넛 차트에서 개발한 기능(속성)

generalSettings 
width : 전체 차트 영역의 넓이를 의미합니다.
height : 전체 차트 영역의 높이를 의미합니다.
backgroundColor : 전체 차트 영역의 배경 색상을 의미합니다.
pieBackgroundColor : 파이 차트 영역의 배경 색상을 의미합니다.
donutBackgroundColor : 도넛 차트 영역의 배경 색상을 의미합니다.
paddingTop : 전체 차트 영역과 차트 윗 부분의 간격을 의미합니다. 차트의 넓이 및 크기는 해당 간격에 맞춰 자동으로 조절 됩니다.
paddingBottom : 전체 차트 영역과 차트 아랫 부분의 간격을 의미합니다. 차트의 넓이 및 크기는 해당 간격에 맞춰 자동으로 조절 됩니다.
paddingLeft : 전체 차트 영역과 차트 왼쪽 부분의 간격을 의미합니다. 차트의 넓이 및 크기는 해당 간격에 맞춰 자동으로 조절 됩니다.
paddingRight : 전체 차트 영역과 차트 오른쪽 부분의 간격을 의미합니다. 차트의 넓이 및 크기는 해당 간격에 맞춰 자동으로 조절 됩니다.
pieOpacity : 차트 전체의 투명도를 의미합니다.
circleOpacity : 파이 차트의 투명도를 의미합니다.
donutOpacity : 도넛 차트의 투명도를 의미합니다.
pieceOpacity : 차트 조각의 투명도를 의미합니다.

pieSettings
color : 파이 차트 조각의 색상을 의미합니다.
pieRadius : 파이 차트의 반지름을 의미합니다.
innerRadius : 파이 차트 내부의 반지름을 의미합니다.
cornerRadius : 파이 차트 조각의 꼭지점 반지름을 의미합니다.
padAngle : 파이 차트 조각 사이의 공백를 의미합니다.
startAngle : 파이 차트의 시작 위치를 의미합니다.
useAngle : 파이 차트를 그릴 때 사용할 각도의 범위를 의미합니다.
sortByValue : 값들을 기준으로 정렬할 지 여부를 의미합니다.
strokeColor : 파이 차트 조각의 테두리 색상을 의미합니다.
strokeWidth : 파이 차트 조각의 테두리 굵기를 의미합니다.
strokeOpacity :파이 차트 조각의 테두리 투명도를 의미합니다.

labelSettings
labelIsUse : 레이블을 사용할 지 여부를 의미합니다.
labelColor : 레이블의 폰트 색상을 의미합니다.
labelFontSize : 레이블의 폰트 크기을 의미합니다.
labelFontWeight : 레이블의 폰트 두께를 의미합니다.
labelFontFamily : 레이블의 폰트를 의미합니다.
labelFontStyle : 레이블의 폰트 스타일을 의미합니다.
labelMoveX : 레이블의 x좌표 이동을 의미합니다.
labelMoveY : 레이블의 y좌표 이동을 의미합니다.
labelDistance : 레이블과 중심 간의 거리를 의미합니다.
labelIsRotate : 레이블이 중심을 향해서 회전할 지 여부를 의미합니다.
labelDegrees : 레이블이 회전할 각도를 의미합니다.
labelText : 레이블에 표시 할 내용을 의미합니다.
labelSkipRatio : 레이블에 표시 하지 않을 범위를 의미합니다.
labelOpacity : 레이블의 투명도를 의미합니다.

arcLinkLabelSettings
arcLinkLabelIsUse : 아크 링크 레이블을 사용할 지 여부를 의미합니다.
arcLinkLabelTextColor : 아크 링크 레이블의 폰트 색상을 의미합니다.
arcLinkLabelFontSize : 아크 링크 레이블의 폰트 크기를 의미합니다.
arcLinkLabelFontWeight : 아크 링크 레이블의 폰트 두께를 의미합니다.
arcLinkLabelFontFamily : 아크 링크 레이블의 폰트를 의미합니다.
arcLinkLabelFontStyle : 아크 링크 레이블의 폰트 스타일을 의미합니다.
arcLinkLabelLineColor : 아크 링크 레이블의 라인 색상을 의미합니다.
arcLinkLabelLineSize : 아크 링크 레이블의 라인 굵기를 의미합니다.
arcLinkLabelSkipAngle : 아크 링크 레이블을 표시하지 않을 범위를 의미합니다.
arcLinkLabelLineDistance : 아크 링크 레이블의 라인 길이와 차트 간의 거리를 의미합니다.
arcLinkLabelTextDistance : 아크 링크 레이블의 텍스트와 라인 간의 거리를 의미합니다.
arcLinkLabelStartLine :아크 링크 레이블의 첫번째 라인 길이를 의미합니다.
arcLinkLabelEndLine : 아크 링크 레이블의 두번째 라인 길이를 의미합니다.
arcLinkLabelText : 아크 링크 레이블에서 표시할 텍스트를 의미합니다.
arcLinkLabelLineOpacity : 아크 링크 레이블의 라인 투명도를 의미합니다.
arcLinkLabelTextOpacity : 아크 링크 레이블의 텍스트 투명도를 의미합니다.

legendSettings
useLegend : 범례를 사용할 지 여부를 의미합니다.
marginTop : 범례와 차트의 상단 간격을 의미합니다.
marginBottom : 범례와 차트의 하단 간격을 의미합니다.
marginLeft : 범례와 차트의 좌측 간격을 의미합니다.
marginRight : 범례와 차트의 우측 간격을 의미합니다.
legendColor : 범례의 폰트 색상을 의미합니다.

tooltipSettings
tooltipUse : 툴팁을 사용할 지 여부를 의미합니다.

데모 사이트 개발
초기에 속성과 구조에 대해서 설계를 하였으며, 팀원들이 각각의 차트를 맡아서 개발을 진행해서 차트 개발에 협업에서의 어려움은 없었습니다. 하지만 데모 사이트를 개발하기 위해서 모든 차트를 하나하나 넣어준다면 시간이 오래걸렸습니다. 그래서 각각의 세팅에 대한 값들을 json형식(name, attribute, description, type, dependency, unit, show, candidate ...)으로 작성하였습니다. 그리고 작성한 json을 읽어와서 데모사이트를 만드는 방식으로 개발을 해서 시간을 많이 줄일 수 있었습니다.


배운점
1. 서비스 경험 (오픈소스, NPM 배포)
- 오픈소스에 기여하는 방식으로 개발을 진행하였으며, 이후에는 누군가가 자발적으로 기여 할 수 있도록 발전시켜보고 싶습니다. 또한 직접 배포해보면서 사용자로부터 피드백을 받고 부족한 부분을 개선해나가는 경험을 할 수 있었습니다. 많은 부분에서 사용자들에게 필요한 기능들을 제공했다고 생각하였으나, 부족한 부분들이 많았고 작은 디테일들도 신경쓸게 많았습니다. 큰 회사에서 정식 런칭을 했는 경우라고 생각한다면, 문제가 많았을 것입니다. 설계에 시간을 더 들이고, 개발 과정에서 피드백을 유연하게 받아들이면서 프로젝트를 진행한다면 더 좋을 것 같습니다.

아쉬운점
1. 다양한 차트 개발
- 파이, 도넛 차트를 개발 한 후에 비슷한 형태인 로즈차트를 개발하거나, bar 차트, line 차트도 개발해보고 싶었습니다. 하지만 기간이 짧아서 하나의 차트를 완벽하게 만드는데 몰두하였습니다. 이후에 기회가 된다면, 추가적으로 라이브러리를 개발하고 개선해보고 싶습니다.