아래는 라미레포트 실제 대화 내역입니다.
나 → 라미 리포트:
글 작성을 시작하겟습니다
라미 리포트 → 글쓰기 튜터:
사용자의 아이디어를 발전시키고 구체화해주세요
현재 진행 상황
▶️ 1. 아이디어 구체화 (1/2)
❌ 2. 아이디어 구체화 (2/2)
❌ 3. 개요 작성
❌ 4. 본문 작성
❌ 5. 제목 작성
현재 단계
아이디어 구체화 (1/2)
글쓰기 튜터 → 나:
(질문이 3개 남았어요)
안녕하세요! 글쓰기 튜터입니다. 우선 어떤 글을 작성하려고 하시는지 말씀해 주시겠어요?
이런 식으로 말씀해 주시면 좋을 것 같습니다:
- "주간 업무 보고서를 쓰려고 하는데, 1-2페이지 정도로 생각하고 있어요."
- "신입 직원 교육용 매뉴얼을 만들건데, 기술팀 신입들이 보기 좋게 쓰고 싶어요."
- "프로젝트 제안서인데, 경영진한테 핵심 내용을 간단명료하게 전달하고 싶어요."
어떤 글을 쓸 예정이신지, 분량은 얼마나 생각하시는지, 그리고 주로 누구에게 보여 줄 것인지 알려주시면 좋겠습니다!
나 → 글쓰기 튜터:
음 오픈소스 제작경험을 이야기 하고 싶은데, 차트라이브러리에요. 프론트엔드 개발자를 대상으로 커리어 향상 과정을 보여주는게 목표입니다. 제 라이브러리 홍보도 좀 하고요 ㅋ
블로그는 긴 글이 될듯?
글쓰기 튜터 → 나:
(질문이 2개 남았어요)
오, 멋진 주제 선택이네! 오픈소스 차트 라이브러리에 대한 경험을 공유하는 거군. 프론트엔드 개발자들에게 정말 유익한 정보가 될 것 같아. 그럼 이제 조금 더 구체적으로 어떤 방향으로 이야기를 풀어갈지 생각해볼까?
- (추천) "내가 오픈소스 프로젝트에 참여하면서 배운 점이나 느낀 점은 무엇이었는지, 그리고 그것이 어떻게 커리어 발전에 영향을 미쳤는지."
- "차트 라이브러리를 개발하면서 마주했던 주요 도전과 어떻게 해결했는지에 대해."
- "나의 오픈소스 라이브러리가 어떤 특별한 기능이나 이점을 제공하는지, 그리고 그것이 프론트엔드 개발자에게 어떻게 도움이 되는지."
1번, 2번, 3번 중에서 번호로 먼저 선택해주고 이야기해줄래? 아니면 다른 방향으로도 자유롭게 이야기해줘도 좋아!
나 → 글쓰기 튜터:
2번은 아무리 차트라이브러리 옵션을 잘 설정해도, 개발하면서 커스텀 옵션을 추가해야하고, 사용자의 니즈를 모두 만족하기가 어렵다는 거였죠
글쓰기 튜터 → 나:
(질문이 1개 남았어요)
사용자의 니즈를 모두 만족하기 어렵다는 점은 정말 많이들 겪는 부분이야. 차트 라이브러리를 개발하면서 그런 도전이 있었다면, 어떤 방식으로 그 문제를 해결했는지 이야기를 풀어나가면 좋을 것 같아. 그래서 좀 더 구체적으로:
- (추천) "커스텀 옵션을 추가하면서 사용자의 피드백을 어떻게 반영했는지 과정과 결과를 설명하고 싶어?"
- "해결책을 찾기 위해 참고했던 자료나 방법, 그리고 그로 인해 얻은 교훈이 있었는지 이야기해볼래?"
- "개발 과정에서 가장 기억에 남는 에피소드나 경험담은 무엇이었고, 그것이 프로젝트에 어떤 영향을 미쳤는지를 공유하면 재미있을 것 같아."
1번, 2번, 3번 중에서 번호로 먼저 선택해주고 이야기해줄래? 다른 생각이 있다면 자유롭게 이야기해줘도 좋아!
나 → 글쓰기 튜터:
음 그래서 저는 근본적으로 옵션을 추가해서 차트 기능을 지원하는 것은 한계가 있다고 생각했거든요. 개발도 더욱 어려워지고요 (코드가 점점 깊어지고 사이드 이펙트는 커지고...)
그래서 2번은 이제 해결방법은 headless-ui라고 디자인 없이 기능만 제공하듯이, 차트도 아예 디자인을 제공하지 않는 headless-ui로 가볼까 하는거죠
글쓰기 튜터 → 나:
(질문이 0개 남았어요)
멋진 접근이네! 디자인 없이 기능만 제공하는 방식은 사용자가 직접 커스터마이즈할 수 있는 자유를 제공해서 좋은 해결책이 될 수 있을 것 같아. 그러면 이 아이디어를 중심으로 글의 방향을 좀 더 구체화해볼까?
- (추천) "차트의 headless-ui 접근 방식을 통해 어떤 장점이 있는지, 그리고 이를 적용하면서 겪은 도전과 극복 방법."
- "headless-ui로 전환하게 된 계기와 그 과정에서 다른 개발자에게 도움이 될만한 팁이나 교훈."
- "headless-ui 방식을 추진하면서 받은 사용자 피드백과 그것이 내 라이브러리의 발전에 어떻게 기여했는지."
1번, 2번, 3번 중에서 번호로 먼저 선택해주고 이야기해줄래? 아니면 네가 생각한 다른 포인트가 있다면 자유롭게 이야기해줘도 좋아!
나 → 글쓰기 튜터:
2번은 이제 교수님과 협업하면서 차트에 대한 요구사항이 까다로워서, 그 어떤 차트라이브러리로도 디자인 요구사항을 수용할수 없었거든요. 그래서 차트라이브러리 코드 분석하면서 마개조를 하며 반영했는데
이대로는 장기적으로 개발이 불가능하다고 생각해서, headless-ui를 적용하게 된거고
이를 가능하게 하려면, 차트에서 레이아웃을 계산하고 페인팅을 담당하는 계층을 분리했어요. 이게 flitter인데 랜더링 엔진 프레임워크를 따로 만든 셈이죠
글쓰기 튜터 → 라미 리포트:
-
사용자는 기존의 차트 라이브러리로 모든 사용자 요구사항을 만족시키는 것이 어려웠고, 이를 해결하기 위해 headless-ui 접근 방식을 제안했습니다. 디자인 없이 기능만 제공하는 이 방식은 사용자가 직접 디자인을 커스터마이즈할 수 있는 자유를 주며, 특히 복잡한 요구사항을 갖춘 프로젝트에 적합하다고 생각합니다. 사용자는 차트의 레이아웃과 페인팅 계층을 분리하여, flitter라는 렌더링 엔진 프레임워크를 개발하였습니다. 이는 장기적인 개발 가능성을 확보하기 위한 조치였습니다.
-
핵심 키워드 및 논점:
- 차트 라이브러리의 한계: 사용자 요구사항 만족의 어려움
- headless-ui 접근: 디자인 없이 기능 제공
- flitter: 레이아웃과 페인팅 계층 분리, 렌더링 엔진 프레임워크
- 지속 가능한 개발방식 확보
라미 리포트 → 나:
현재 아이디어 구체화 (2/2) 단계가 완료되었습니다. 이제 아이디어를 바탕으로 글의 전체 구조와 개요 작성을 시작해볼까요? 다음 단계로 넘어가시겠습니까?
현재 진행 상황
✅ 1. 아이디어 구체화 (1/2)
▶️ 2. 아이디어 구체화 (2/2)
❌ 3. 개요 작성
❌ 4. 본문 작성
❌ 5. 제목 작성
현재 단계
아이디어 구체화 (2/2)
나 → 라미 리포트:
아니 아이디어 구체화 단계로 가야죠 지금 아직 안끝났음
라미 리포트 → 글쓰기 튜터:
유저는 아직 아이디어 구체화 단계가 끝나지 않았다고 언급했습니다. 추가적인 방향 제시가 필요합니다.
현재 진행 상황
✅ 1. 아이디어 구체화 (1/2)
▶️ 2. 아이디어 구체화 (2/2)
❌ 3. 개요 작성
❌ 4. 본문 작성
❌ 5. 제목 작성
현재 단계
아이디어 구체화 (2/2)
글쓰기 튜터 :
유저는 지금까지 headless-ui 접근 방식을 선택하게 된 배경과 이를 구현하기 위해 flitter라는 렌더링 엔진 프레임워크를 개발한 경험을 공유하고 있습니다. 추가로 아이디어를 구체화하기 위해 사용자 피드백이나 프로젝트에 도입한 혁신적인 방법론, 그리고 다른 개발자들에게 유익할 교훈을 더 다룰 수 있는 방향을 제시해줄 필요가 있습니다. 이 방향에서 더 이야기해볼 부분이 있는지 확인해보세요.
나 → 글쓰기 튜터:
넵 음.. 더 이야기하자면, 랜더링엔진 프레임워크는 flutter라는 구글 크로스플랫폼 코드를 따라 만들었고요. 이를 통해서 브라우저의 랜더링 과정을 좀 더 자세히 이해하게 되었어요. 지금 레이아웃을 계산하거나 페인팅을 하는걸, flitter를 만들면서 구현했는데 이게 브라우저에서 dom tree를 파싱해서 layout, paint하는것과 똑같더라구요
글쓰기 튜터 → 나:
(질문이 3개 남았어요)
지금까지 나온 내용을 정리하면, 네가 headless-ui 접근 방식을 선택하게 된 이유와 flitter라는 자체 렌더링 엔진 프레임워크 개발 과정에서 얻은 인사이트를 중심으로 이야기를 나누고 있어. 특히 브라우저의 렌더링 과정과 비슷한 방식으로 flitter를 구현하면서 새로운 이해를 깊이하게 된 부분을 언급했네.
이 부분에서 더 이야기해보면 좋을 것 같은데:
- flitter를 구체적으로 구현하면서 직면한 가장 큰 도전은 무엇이었어? 그걸 어떻게 극복했는지 궁금해.
- 이 과정에서 얻은 브라우저 렌더링에 대한 새로운 이해가 다른 프로젝트나 기술적인 성장에 어떻게 기여했는지에 대해 더 들려줄 수 있어?
- 사용자나 다른 개발자에게 이 경험이 어떤식으로 도움이 되었을지에 대한 생각도 있어?
어떤 점이 가장 이야기해보고 싶어? 또는 다른 주제나 방향이 있다면 자유롭게 얘기해줘!
나 → 글쓰기 튜터:
flitter를 구현하면서 어려웠던 것은 이제 테스트였죠. 랜더링 코어부분 코드를 수정하니까 잘못 수정하면 사이드 이펙트가 엄청났거든요. 그래서 저는 모든 화면예제들을 스크린샷으로 찍어서 테스트를 할수 있도록
스토리북과 크로마틱으로, 배포할때마다 변경사항은 없는지 테스트를 하기도 했어요
그리고 브라우저에 대한 랜더링 이해 뿐만 아니라, flitter는 선언적으로 상태관리도 하기 때문에 리액트의 상태 시스템을 보다 잘 이해하는 계기가 되었죠. flitter도 자체적으로 setState 메서드가 있어서, 상태를 바꾸는 기능을 제공합니다. 이걸 통해 리액트는 스벨트는 어디서든 쓸 수 있는거죠
글쓰기 튜터 → 나:
(질문이 2개 남았어요)
지금까지 나온 이야기를 정리해보면, flitter를 구현하면서 직면한 가장 큰 도전은 테스트였다는 점을 알 수 있어. 특히, 랜더링 코어 부분의 코드를 수정할 때 발생할 수 있는 사이드 이펙트를 제어하기 위해 스토리북과 크로마틱을 활용하여 배포 시마다 변경 사항을 테스트한 것이 인상적이네. 이러한 과정에서 flitter의 상태관리 시스템을 구현하며 리액트와 스벨트의 상태 시스템을 이해하게 되었고, 이는 개발자로서 기술적인 성장에도 기여했을 것 같아.
이런 내용이 핵심이 될 수 있겠네. 여기서 몇 가지 더 생각해보면 좋을 것 같은데:
- 스토리북과 크로마틱을 사용한 테스트 방법이 다른 개발자들에게도 적용될 수 있을 것 같은데, 이 부분을 좀 더 구체적으로 설명해 줄 수 있어? 특히, 이 방법이 개발 과정에서 어떤 문제들을 해결했는지 구체적인 사례를 들어 설명할 수 있을까?
- flitter의 상태관리 시스템을 통해 리액트와 스벨트의 상태 시스템을 어떻게 활용했는지, 구체적인 기능이나 프로젝트에 적용한 예시가 있을까?
이런 방향으로도 생각해볼 수 있을 것 같아. 어떻게 생각해?
나 → 글쓰기 튜터:
음 headless-chart에 대해 이야기도 해볼까 음.. headless-chart를 결국 만들어가지고, flitter를 활용해서 커스텀을 할 수 있으니까 이제 디자인은 원하는대로 가능해졌거든. 그리고 디자인 예시 코드도 많이 추가했기 때문에 원하는 사람은 복사 붙여넣기만 하면 되도록, showcase를 많이 만들고 있거든
글쓰기 튜터 → 나:
(질문이 1개 남았어요)
Headless-chart를 만드는 과정과 이를 통해 얻은 성과를 보니 정말 흥미롭네. flitter를 통해 원하는 대로 디자인을 커스텀할 수 있게 된 점과, 디자인 예시 코드를 추가하여 사용자들이 쉽게 접근할 수 있도록 한 점도 인상적이야. 특히 showcase를 많이 만들어서 커뮤니티에 공유하려고 하는 노력도 칭찬할 만해.
이런 내용이 핵심이 될 수 있겠네. 여기서 몇 가지 더 생각해보면 좋을 것 같은데:
- headless-chart를 통해 해결하고자 했던 본래의 문제나 필요성이 무엇이었는지, 그리고 어떻게 이를 해결했는지에 대해 좀 더 설명해 줄 수 있어?
- showcase를 많이 만들고 있는데, 이를 통해 사용자 및 다른 개발자들에게 어떤 유익을 주고 있는지 구체적인 피드백이나 반응이 있었는지도 궁금해.
- flitter와 headless-chart를 연계 개발하면서 얻은 기술적 도전이나 배운 점은 무엇이 있는지, 그리고 다른 프로젝트에도 적용할 만한 교훈이 있을까?
이런 방향으로도 생각해볼 수 있을 것 같아. 어떻게 생각해? 더 이야기하고 싶은 부분이 있으면 자유롭게 말해줘!
나 → 글쓰기 튜터:
headless-chart는 노골적으로 다른 차트라이브러리의 디자인과 기능, 애니메이션을 따라하고 있거든. 그러니까 다른 라이브러리 기능을 모두 다 쓸 수 있다는거지. 이걸 보면 이제 차트옵션을 찾아 라이브러리 찾아다니지 말고 여기 쇼케이스 보고 복사해서 가져가라는거야
글쓰기 튜터 → 나:
(질문이 0개 남았어요)
지금까지의 이야기를 바탕으로, headless-chart의 전략과 의도를 더욱 명확히 할 수 있을 것 같아. 네가 설명해준 것처럼, 다른 차트 라이브러리의 디자인과 기능을 따라하면서도 flitter를 활용해 커스터마이징을 쉽게 할 수 있도록 한 점이 매우 흥미로운 전략이야. 이런 접근 방식을 통해 사용자가 별도의 차트 옵션을 찾을 필요 없이, 제공된 쇼케이스를 간편하게 활용할 수 있도록 만들었다니, 굉장히 사용자 친화적인 접근인 것 같아.
이런 방향으로도 생각해볼 수 있을 것 같아:
- headless-chart가 기존 차트 라이브러리와 비교했을 때 가지는 경쟁 우위나 장점은 무엇이라고 생각해? 특히 사용자가 가장 만족해할 기능 혹은 디자인 요소가 무엇인지 궁금해.
- 이러한 접근 방식이 시장에서 어떤 반향을 일으킬지, 혹은 이미 받은 반응이 있다면 어떤 것이 있는지 더 들어보고 싶어.
- 이 프로젝트를 통해 얻은 통찰이나 교훈이 있다면, 다음 프로젝트나 다른 개발자들에게 어떤 식의 조언으로 연결될 수 있을지 생각해보는 것도 좋을 것 같아.
이런 방향에서 더 이야기 나누고 싶다면 어느 부분이 가장 흥미로운지 말해줘! 물론, 다른 이야기하고 싶은 주제가 있다면 그것도 언제든 환영이야.
나 → 글쓰기 튜터:
솔직히 말하면 유일무이하거든, svg나 canvas를 이렇게 리액트 식으로 선언적으로 다룬 랜더링 엔진 프레임워크도 없거니와 이걸 활용한 차트라이브러리는 더더욱없지. 현재 차트 커스텀이 어려워서 기획자와 디자이너가 타협하고 라이브러리 디자인 시스템에 맞추거나 기능을 하향하는데 이런게 이제 사라질거야.
더이상 개발자들이 핑계댈수 없는거지 ㅋㅋ
글쓰기 튜터 → 라미 리포트:
사용자는 headless-chart가 다른 차트 라이브러리와 비교했을 때 유일하다고 생각하고, svg나 canvas를 리액트 식으로 선언적으로 다루는 렌더링 엔진을 활용한 차트 라이브러리는 없다고 강조했습니다. 또한, headless-chart를 통해 차트 커스터마이징이 쉬워지며, 개발자들이 더 이상 차트 디자인이나 기능에서 타협할 필요가 없다고 설명하였습니다.
라미 리포트 → 개요 작성 전문:
사용자가 제공한 내용을 바탕으로, 오픈소스 차트 라이브러리 'headless-chart'의 개발 과정과 이를 통해 얻은 성과에 대한 개요를 작성해주세요. 주요 내용은 flitter를 활용한 커스터마이징 용이성, 다른 라이브러리와의 비교우위, showcase의 사용자 접근성 제공 등입니다.
현재 진행 상황
✅ 1. 아이디어 구체화 (1/2)
✅ 2. 아이디어 구체화 (2/2)
▶️ 3. 개요 작성
❌ 4. 본문 작성
❌ 5. 제목 작성
현재 단계
개요 작성
개요 작성 전문 → 나:
[1. 읽는 사람과의 공감]
1.1 "프론트엔드 개발자로서, 차트 라이브러리의 복잡한 옵션들에 지쳤던 경험이 있다."
1.2 "디자이너와 협업할 때 차트를 커스터마이즈하는 데 있어 제약을 느꼈다."
1.3 "기존 차트 라이브러리는 기능적 한계가 있어, 디자인을 타협해야 했다."
[2. 문제 제기와 해결 조건]
2.1 "기존 차트 라이브러리의 제약: 한정된 기능과 복잡한 옵션 설정의 어려움."
2.2 "사용자가 원하는 대로 커스터마이즈하길 원하는 필요성이 증가하고 있다."
2.3 "실제 사용자 니즈와 라이브러리의 간극을 메울 방법이 필요하다."
[3. 구체적 해결책]
3.1 "flitter를 활용하여 리액트 스타일로 SVG와 Canvas를 선언적으로 다루기."
3.2 "다양한 디자인 예시를 제공하여 쇼케이스를 손쉽게 활용할 수 있도록 지원."
3.3 "사용자가 다른 라이브러리의 기능 또한 사용 가능하게 하여 선택의 폭 넓히기."
[4. 베네핏 소구]
4.1 "차트 커스터마이징이 용이해지면서 디자이너와의 협업 강화."
4.2 "사용자가 차트 디자인 옵션을 쉽게 적용해, 개발 효율성 증가."
4.3 "성공적으로 시장에서 반향을 일으키며, 개발자 커뮤니티 내 긍정적 반응 유도."
[5. 클로징과 행동 유도]
5.1 "headless-chart의 쇼케이스를 통해 당장 필요한 차트를 빠르게 구현해보세요."
5.2 "차트를 더 이상 타협하지 말고, 원하는 대로 자유롭게 디자인하세요."
5.3 "당신의 프로젝트에서 더 혁신적인 디자인을 실현하는 첫 걸음을 시작하세요."
이 개요가 유저의 의도를 잘 반영했는지 피드백 부탁드립니다. 혹시 수정이 필요하거나 추가하고 싶은 부분이 있으신가요?
나 → 개요 작성 전문:
지금 여기가 단순히 headless-chart의 홍보문이 되었는데 음 제목을 어떤 느낌으로 가면 좋냐고 말하면,
'내가 차트라이브러리를 만든 이유'라고 가고, 여기의 특색을 이야기 하면서, 베네핏으로 차트의 복잡함을 다룰뿐만 아니라, 흠 이글을 읽은 사람들이 어떤 영감을 받았으면 좋겟는데...
이걸 만든 경험을 위주로 작성한다는 측면에서 이런 오픈소스 개발이 커리어 향상에 도움이 되는걸 좀 전반적인 기조로 잡아보았으면? 그리고 그 주재료로 차트 만드는 과정이 들어가는거지
개요 작성 전문 → 나:
여기에서 "4. 베네핏 소구" 부분이 headless-chart의 홍보에 초점을 맞추고 있네요. 이를 보완하기 위해 "프론트엔드 개발자의 커리어 발전"이라는 측면을 더 잘 반영할 수 있을까요? "3. 구체적 해결책"에서도, headless-chart 개발 과정에 대한 경험과 배운 점을 더 녹여내는 것이 좋을까요? 추가적인 아이디어나 의견이 있으면 공유해 주세요.
나 → 개요 작성 전문:
그래 배운점과 경험을 잘 녹여내면 좋을거 같아. flitter를 개발하기 위해 flutter라는 프레임워크 코드를 뜯어보고, dart로 되어있는걸 분석하면서 코드 읽는 능력도 올라갔는데 이건 진짜 유용하게 쓰고 있거든.
어떤 라이브러리이든 버그가 있으면 내가 문제를 해결해서 pr을 올릴 정도가 되었으니까 말이야
개요 작성 전문 → 나:
"3. 구체적 해결책" 부분에 headless-chart 개발 과정에서의 경험과 배운 점을 반영하기 위해, flitter 개발 시 수행한 구체적인 작업을 녹여낼 수 있을까요? 예를 들어, flutter 프레임워크를 분석하고 코드를 읽는 능력을 향상시킨 구체적인 사례가 있다면 포함하는 것이 좋을 것 같습니다. 이를 통해 독자들에게 어떤 영감을 주고 싶으신지, 또는 본인의 커리어 발전에 어떤 도움을 받았는지도 함께 공유해 주시면 좋겠습니다. 추가로 더 다루고 싶은 경험이 있다면 말씀해 주세요.
나 → 개요 작성 전문:
그래요 flutter 앱을 저도 만들면서 제 목표는 각 위젯의 인터페이스와 그 동작과정, 그리고 그안의 들어간 코드였거든요. 안드로이드 스튜디오 깔아가지고 flutter 코드를 타고타고 들어가면서 이부분은 어떻게 구현했고, 왜 이렇게 구현했는지 이해하기 위해 골머리를 앓았죠.
고품질의 코드를 보면서 참 많이 배웠던거 같아요. gof의 디자인 패턴의 웬만한 설계원칙이 다 들어가 있었죠 아 이래서 이렇게 디자인패턴을 쓰는구나를 배웠던거 같네요
개요 작성 전문 → 라미 리포트:
사용자는 오픈소스 차트 라이브러리 개발에서 자신의 커리어 발전에 도움이 된 점을 강조하고 싶어 합니다. 'flutter'를 분석하여 인터페이스 이해 및 고품질 코드 학습, 코드를 읽고 문제를 해결할 수 있는 능력 향상을 경험했다고 하며, 이로 인해 디자인 패턴도 체득했다고 합니다. 이를 바탕으로 개요에서 headless-chart 개발 경험과 배운 점을 주축으로 커리어 발전 이야기를 녹여내는 방향으로 발전시켜야 할 것 같습니다.
라미 리포트 → 개요 작성 전문:
오픈소스 차트 라이브러리 개발 과정에서의 배움과 커리어 발전 측면을 강조하는 개요를 작성해주세요. 'flutter' 분석을 통한 코드 분석 능력 향상과 고품질 코드를 학습하며 디자인 패턴을 체득한 경험을 중심으로, 관련된 구체적인 해결책과 베네핏 부분을 보완해주세요.
현재 진행 상황
✅ 1. 아이디어 구체화 (1/2)
✅ 2. 아이디어 구체화 (2/2)
✅ 3. 개요 작성
▶️ 4. 본문 작성
❌ 5. 제목 작성
현재 단계
본문 작성
개요 작성 전문 → 나:
"3. 구체적 해결책"에서의 플러터 분석 경험과 어떻게 코드를 읽는 능력을 얻게 되었는지에 대한 이야기를 추가하려 합니다. 플러터 코드의 각 위젯 인터페이스를 이해하고 디자인 패턴을 학습한 경험이, headless-chart를 개발하는 데 어떻게 도움이 되었는지 명확히 연결하려고 합니다. 이를 통해 독자들이 어떤 영감을 받을 수 있을까요? 개발자 커리어에 어떻게 도움이 되었는지 강조하는 것이 좋을까요?
나 → 개요 작성 전문:
음 이거 본문 작성으로 가보실래요?
개요 작성 전문 → 라미 리포트:
사용자가 본문 작성으로 넘어가고 싶어합니다.
라미 리포트 → 글쓰기 전문:
오픈소스 차트 라이브러리 개발 과정에서의 경험과 배운 점을 녹여내어 본문을 작성해주세요. 사용자가 Flutter 프레임워크를 분석하며 코드 읽는 능력과 고품질 코드 학습, 디자인 패턴 체득 등을 통해 커리어 발전에 도움을 받은 부분을 강조해주세요.
현재 진행 상황
✅ 1. 아이디어 구체화 (1/2)
✅ 2. 아이디어 구체화 (2/2)
✅ 3. 개요 작성
▶️ 4. 본문 작성
❌ 5. 제목 작성
현재 단계
본문 작성
글쓰기 전문 → 나:
[본문]
────────────────────────────────────────────────────────
1. 도입: “왜 나는 직접 차트 라이브러리를 만들었을까?”
────────────────────────────────────────────────────────
프론트엔드 개발자로 일하다 보면, 차트 라이브러리는 한 번쯤 반드시 만나게 되는 영역입니다. 사용자에게 데이터 흐름을 시각적으로 보여줘야 하는데, 기존 차트 라이브러리를 사용하면 옵션 설정이 너무 복잡하거나, 원하는 모양대로 커스터마이즈하기가 쉽지 않았다는 경험을 다들 해보셨을 겁니다. 디자이너가 원하는 색감·스타일과, 프로젝트 요구사항을 동시에 만족하려다 보면 결국 “이건 라이브러리에서 지원 안 되니 디자인을 포기하자”라는 결론에 쉽게 달합니다.
저 역시 초기에 여러 유명 차트 라이브러리를 활용했지만, 조금 깊게 들어가면 기능 제한이 명확했습니다. “내가 직접 만들어 보면 어떨까?”라는 호기심이 생겼고, 그렇게 태어난 것이 바로 ‘headless-chart’입니다. 단순히 ‘오픈소스 라이브러리를 만들었다’는 경험을 넘어서, 이 과정을 통해 커리어 개발에도 큰 도움이 되었다고 확신합니다.
────────────────────────────────────────────────────────
2. 문제의식: 기존 라이브러리의 한계, 그리고 내가 택한 길
────────────────────────────────────────────────────────
왜 새로 만들었을까요? 사실 기존 차트 라이브러리 중에는 기능·디자인 측면에서 꽤 뛰어난 것들이 많습니다. 하지만 막상 요구사항이 ‘디테일’을 필요로 할 때, 예를 들어 복잡한 커스텀 마커(툴팁)나 다양한 애니메이션 효과, 그리고 정교한 레이아웃 등, 이미 구축된 라이브러리 구조가 발목을 잡곤 합니다.
• 라이브러리 디자인 시스템에 얽매임 → 디자이너와 협업 시 디자인 타협 발생
• 오버라이드·마개조를 하다 보면 업데이트 시 호환성 문제 발생
• 복잡한 옵션 구조 → 코드 가독성 및 유지보수 어려움 증가
이렇듯 라이브러리를 마구 뜯어고치는 작업이 장기적으로 가능할까 고민했습니다. 그리고 “기존의 디자인·레이아웃·스타일을 전혀 주지 않는, 말 그대로 기능만 제공하는 ‘headless-ui’ 방식이면 어떨까?”라는 아이디어가 떠올랐습니다. 이 접근이라면 사용자(개발자)나 디자이너가 원하는 대로 ‘동작은 그대로 두고, 디자인은 마음껏’ 재구성할 수 있습니다.
────────────────────────────────────────────────────────
3. 구체적 해결책: ‘headless-chart’와 ‘flitter’의 탄생
────────────────────────────────────────────────────────
headless-chart는 UI가 없는, 완전히 기능만 제공하는 형태의 차트 라이브러리입니다. 그러다 보니 내부적으로는 뼈대가 되어줄 ‘렌더링 엔진’이 필수였고, 이를 위해 만든 것이 바로 flitter입니다. 여기서 제가 가장 공들였던 것은 다음과 같습니다.
① 나만의 렌더링 엔진: flitter
- SVG나 Canvas를 직접 조작하지 않고, 리액트처럼 “선언형”으로 다룰 수 있게 했습니다.
- 레이아웃 계산과 페인팅(그리기) 과정을 마치 브라우저의 DOM 렌더링 프로세스처럼 단계적으로 분리했습니다.
- 상황에 따라 사용자(개발자)가 원하는 스타일을 자유롭게 적용하도록, 디자인 로직을 떼어내 headless로 만들었습니다.
② 플러터(Flutter)에서 얻은 영감
- 저는 flitter를 만들기 전, 구글의 크로스플랫폼 프레임워크인 Flutter 코드를 깊이 분석했습니다.
- 알다시피 Flutter는 Dart 언어를 기반으로, ‘위젯’이라는 개념으로 레이아웃과 UI를 구성합니다.
- 안드로이드 스튜디오로 Flutter 프로젝트를 실제로 돌려보며, 각 위젯의 인터페이스가 어떻게 동작하고, 어디서 어떤 디자인 패턴을 적용하는지 갈피를 잡았습니다.
- 그 과정에서 브라우저 렌더링과 Flutter 렌더링이 본질적으로 “UI를 선언적으로 다룬다”는 공통점을 발견했고, 이를 flitter에 녹여낼 수 있었습니다.
③ 개발 과정에서 익힌 것들
- 다른 프레임워크(Flutter)의 고품질 코드를 직접 들여다보면서 “왜 이런 디자인 패턴을 적용했을까?”를 자연스레 고민하게 되었습니다.
- GOF(GoF) 디자인 패턴의 다양한 상황별 적용 예시를 Flutter 소스에서 확인하고, 제 코드에도 접목해봤습니다.
- 덕분에 이제는 어떤 라이브러리를 만나도 “이 핵심 로직에서는 어떤 패턴을 써야 할까?”라는 질문을 스스로에게 던지고, 직접 코드를 수정해 PR을 올릴 만큼 역량이 늘었습니다.
────────────────────────────────────────────────────────
4. 베네핏: 차트 커스터마이징의 자유와 커리어 성장
────────────────────────────────────────────────────────
headless-chart가 제공하는 가장 큰 장점은 “더 이상 차트 디자인이나 기능을 타협하지 않아도 된다”는 점입니다. 뼈대가 되는 flitter는 브라우저 내부 동작과 비슷한 단계별 렌더링 프로세스를 엮어두었기 때문에, 원하는 디자인을 얼마든지 얹을 수 있습니다. 구체적으로는:
• 완전한 커스터마이즈: 디자이너가 내놓은 시안을 최대한 실현 가능
• infographics, 대시보드, 인터랙티브 애니메이션 등 어떤 스타일도 직접 구현 가능
• 기존 차트 라이브러리들을 쇼케이스 삼아, 기능만 ‘복사 붙여넣기’하듯 활용 가능
이 과정을 통해 저 자신의 커리어에도 중요한 전환점이 생겼습니다.
- 첫째, 코드 독해와 디버깅 능력이 크게 향상되었습니다. Dart로 작성된 Flutter 코드를 무작정 파고들면서, 제 코드 어디에서 버그가 발생하는지 빠르게 파악하는 습관이 생겼습니다.
- 둘째, 협업 능력이 높아졌습니다. 스토리북(Storybook)과 크로마틱(Chromatic)을 이용해 시각적 테스트를 자동화해두니, 디자이너·기획자와 수정 사항을 빠르게 공유할 수 있었습니다.
- 셋째, 오픈소스 생태계에 적극적으로 기여할 수 있게 되었습니다. 다른 라이브러리에서 버그나 개선사항이 보이면, 레포지토리를 클론 떠서 직접 PR을 올릴 정도로 자신감이 붙었습니다.
결국, “무언가를 직접 만들면서 깨닫는 것”이라는 가치는 단순히 ‘라이브러리를 한 개 더 만드는 것’ 이상의 의미를 갖게 됩니다. 프로젝트를 만드는 경험 자체가 여러 면에서 커리어를 풍부하게 해주고, 새로운 기회로 이어질 수 있음을 체감하고 있습니다.
────────────────────────────────────────────────────────
5. 마무리: “직접 만들어보면서 얻는 성장”
────────────────────────────────────────────────────────
지금도 headless-chart는 조금씩 진화하는 중입니다. 제 목표는 “누구나 원하는 차트 디자인을 단숨에 만들 수 있는” 라이브러리를 완성하는 것이고, 이를 위해서는 더 많은 사용자 피드백과 커뮤니티 기여가 필요합니다. 이 글을 읽는 분들이 제 열정에 조금이라도 공감하고, “나도 뭔가 새롭게 구현해볼까?”라는 의욕을 얻게 된다면 더할 나위 없이 기쁠 것 같습니다.
오픈소스 라이브러리에 관심이 있으시다면, 주저 말고 일단 클론 떠서 코드를 살펴보세요. 그리고 개선 아이디어나 버그 리포트를 남겨주셔도 좋습니다. “내가 만든 것이 누군가에게 유용해진다면, 거기서부터 모든 성장이 시작된다.” 저는 이 깨달음을 많은 분들과 나누고 싶습니다.
────────────────────────────────────────────────────────
[피드백과 의견을 부탁드립니다]
읽어주셔서 감사합니다! 이 글이 “차트 라이브러리를 직접 만들겠다”는 제 결심 뒤에 있었던 고민과 성장 과정을 잘 전달했을까요? 혹시 더 궁금한 부분이나, 추가했으면 하는 내용이 있다면 꼭 알려주세요. 주제의 흐름이 매끄러운지, 독자로서 어떤 느낌이었는지 솔직한 피드백도 부탁드립니다. 여러분의 의견을 듣고 더욱 발전된 글로 다듬어보고 싶습니다.
