우리는 왜 차트를 쪼갰을까: 복잡한 데이터 시각화에 유연하게 대응하기

#Frontend #데이터 시각화 #의존성 관리

데이터를 활용하는 분야에서 적절한 시각화는 매우 중요합니다. 하지만 복잡한 요구사항에 대응하기 위해 차트의 깊은 곳까지 들여다보는 일은 때때로 매우 어렵습니다. 디자인 시스템을 조립하듯 쉽게 차트를 만들 수 있다면 어떨까요? 이를 위해 차트의 로직과 UI를 분리하여 정의하고, 새롭게 설계 및 구현한 과정을 공유합니다.

발표자 : ollie.one
카카오헬스케어에서 데이터 플랫폼을 위한 차트 시스템을 개발하고 있습니다. 유연한 인터페이스 설계와 안정성 높은 코드 작성에 관심이 많습니다.

Transcript

2. ߑ؀ೠ
   ੄ܐ
   োҳ
   ؘ੉ఠܳ
   ೠ
   Ҕীࢲ
   Ѩ࢝ೞҊ
   ࠙ࢳೡ
   ࣻ
   ੓ח োҳ੗ਊ
   ##
   ؘ੉ఠ
   ೒ۖಬ
4. ੐࢚
   ؘ੉ఠ ࢿ߹
   ա੉
   ੋઙ
   ١ ਬ੹੗
   ؘ੉ఠ ਬ੹੗
   ߸੉
   ঐ
   ੉۱
   ١
5. औҊ
   ࡅܰҊ
   ਬোೞѱ
   ର౟ܳ
   ѐߊೞ۰ݶ नӏ
   ѐߊ ࠂ੟ೠ
   ਃҳࢎ೦
6. ୶࢚ചػ
   ੋఠಕ੉झ ࢿ ܻঘ౟
   ஹನք౟
   ӝ߈ ੗߄झ௼݀౟
   ӝ߈ WJDUPSZ - DIBSU SFDIBSUT WJDUPSZ - DIBSUT !OJWP $IBSUKT EKT !WJTY
7. ୶࢚ചػ
   ੋఠಕ੉झ ࢿ ܻঘ౟
   ஹನք౟
   ӝ߈ ੗߄झ௼݀౟
   ӝ߈ WJDUPSZ - DIBSU SFDIBSUT WJDUPSZ - DIBSUT !OJWP $IBSUKT EKT !WJTY औҊ
   ࡅܲ
   ର౟
   ஹನք౟
   ࢤࢿ
8. ਋ܻ੄
   ޙઁܳ
   ೧Ѿ೧઴
   ࣻ
   ੓ਸө
9. ࠙ӝ
   ߹
   ജ੗
   ࣻܳ
   ԃ਷ࢶ
   Ӓې೐۽
   ࠁৈ઱ࣁਃ ױ
   :чী
   ٮۄ
   Ӓې೐੄
   ࢚࢝੉
   ׳ۄ૑ѱ
   ೧઱ࣁਃ
10. ࠙ӝ
    ߹
    ജ੗
    ࣻܳ
    ԃ਷ࢶ
    Ӓې೐۽
    ࠁৈ઱ࣁਃ ױ
    :чী
    ٮۄ
    Ӓې೐੄
    ࢚࢝੉
    ׳ۄ૑ѱ
    ೧઱ࣁਃ 
11. ࠙ӝ
    ߹
    ജ੗
    ࣻܳ
    ԃ਷ࢶ
    Ӓې೐۽
    ࠁৈ઱ࣁਃ ױ
    :чী
    ٮۄ
    Ӓې೐੄
    ࢚࢝੉
    ׳ۄ૑ѱ
    ೧઱ࣁਃ
12. ೗ࣄ
    
    ߸ജ
    ೣࣻ \
    ؘ੉ఠ
    ^ 3BOHF %PNBJO 
     
    IFJHIU
13. ޙઁ
    
    ࣁࠗ
    ࢎ೦੉
    х୾૓
    ੋఠಕ੉झ
15. ର౟
    ৔৉ ؘ੉ఠ ԃ਷ࢶ
    ਃࣗ
    6*
16. ޙઁ
    
    ցޖ
    ழ׮ۆ
    ё୓৬
    ೣࣻ
17. ޙઁ
    
    ղࠗী
    х୾૓
    ৘ஏ
    ࠛоמೠ
    ۽૒
18. ਃҳࢎ೦੄
    ࠂ੟ࢿ ৘ஏ
    ࠛоמࢿ
    ߡӒ
    j पઁ
    ਃҳࢎ೦ٜ ׮ܲ
    ߑߨ੉
    ೙ਃೞ׮
19. ৈ۞
    ର౟ܳ
    ࡅܰѱ
    ѐߊೞӝ
    ਤೠ ੗ਬ۽਍
    ઑ೤җ
    ೤ࢿ ࠂ੟ೠ
    ਃҳࢎ೦ਸ
    ߈৔ೞӝ
    ਤೠ ੘ѱ
    ܻ࠙ػ
    ҳࢿਃࣗ ए਍
    ѐߊਸ
    ਤೠ ૒ҙ੸ੋ
    ੋఠಕ੉झ
20. ୶࢚ചػ
    ੋఠಕ੉झ ܻঘ౟
    ஹನք౟
    ӝ߈ ੗߄झ௼݀౟
    ӝ߈ WJDUPSZ - DIBSU SFDIBSUT WJDUPSZ - DIBSUT !OJWP $IBSUKT EKT !WJTY ਋ܻо
    ೙ਃೠ
    Ѫ
22. ୶࢚ചח
    ҃਋ী
    ٮۄ
    ࢚؀੸੉׮
23. যڃ
    ࠗ࠙ਸ
    ҕѐೞҊ
    যڃ
    ࠗ࠙ਸ
    х୾ঠ
    ೡө
24. ۽૒ ࢚క ؘ੉ఠܳ ӏ஗җ
    ઑѤী
    ٮۄ 6* ౠ੿ೠ
    بഋী
    ࡁ؄ ର౟
    ؘ੉ఠܳ
    ੿೧૓
    ӏ஗ী
    ٮۄ
    ౠ੿ೠ
    بഋী
    ࡁ؀য
    աఋմ
    ૘೤୓
25. ର౟
    пп੄
    Ҋਬೠ
    ӏ஗਷
    ߸ೞ૑
    ঋח׮ ۽૒ ࢚క ؘ੉ఠܳ ӏ஗җ
    ઑѤী
    ٮۄ 6* ౠ੿ೠ
    بഋী
    ࡁ؄
26. $ISPNF 4BGBSJ 'JSFGPY &EHF 0UIFS
27. ؘ੉ఠ৬
    ಴അ
    ߑध਷
    ࣻद۽
    ߸ೡ
    ࣻ
    ੓׮ ۽૒ ࢚క ؘ੉ఠܳ ӏ஗җ
    ઑѤী
    ٮۄ 6* ౠ੿ೠ
    بഋী
    ࡁ؄
28. ࠙ӝ
      L
    †
    L
29. ۽૒਷
    х୾૑Ҋ
    ࢚క৬
    6*ח
    ٘۞դ
    ର౟ ର౟੄
    ࣁࠗ
    ز੘ ؘ੉ఠ৬
    بഋٜ
30. ೯ز਷
    х୾૑Ҋ
    ࢚క৬
    6*ח
    ٘۞դ
    ஹನք౟
31. 3BEJY
    6* ର౟ب
    ੉ۧѱ
    ѐߊೡ
    ࣻ
    ੓ਸө
32. $POUFYU
    "1*
    ӝ߈੄
    $PNQPVOE
    $PNQPOFOU
33. ށۄب
    غח
    Ѫਸ
    ੜ
    х୶੗ ର౟
    ۽૒
36. ChartProvider VTF$IBSU-PHJD #BS$IBSU-PHJD $IBSU
     #PY1MPU-PHJD )JTUPHSBN-PHJD WBMVF
37. ChartProvider VTF$IBSU-PHJD #BS$IBSU-PHJD $IBSU
     #PY1MPU-PHJD )JTUPHSBN-PHJD WBMVF
39. <> <> DSFBUF(SBEJFOU EBUBTFUT <> j
40. DSFBUF(SBEJFOU EBUBTFUT <> <> <> j TIJGU TIJGU
41. <> <> %BUB1SPWJEFS
     useData( ) data: Data[ ] -JOF
     data[0]
42. %BUB1SPWJEFS
     useData({ id: ‘ജ੗ࣻ’ }) -JOF
     { id: ‘ജ੗ ࣻ’, data: …, } 0CKFDU 4UPSF 'FUDI
43. ࠙ӝ
      ࠙ӝ
      ࠙ӝ
      ੉੹
    ؀࠺
     
45. ৈ੹൤
    ٘۞ա૑
    ঋח
    ஹನք౟੄
    6*
47. ঌইঠ
    ೞח
    Ѫਸ
    ݺद੸ਵ۽
    ٘۞ղ੗ ؘ੉ఠ৬
    6*
48. ࠙ӝ
      ࠙ӝ
      ࠙ӝ
      ੉੹
    ؀࠺
      EBUBUZQF
    
    tQPJOUu EBUBUZQF
    
    tUPUBMu EBUBUZQF
    
    tSBUFu
49. %BUB1SPWJEFS
    DPOTU
    UZQF
    
    QBSTF%BUB EBUB 5PPMUJQ
     useData({ id: ‘ജ੗ࣻ’ }) ࠙ӝ
      ࠙ӝ
      ࠙ӝ
      ੉੹
    ؀࠺
      EBUBUZQF
    
    tQPJOUu EBUBUZQF
    
    tUPUBMu EBUBUZQF
    
    tSBUFu
50. ࠙ӝ
      ࠙ӝ
      ࠙ӝ
      ੉੹
    ؀࠺
      EBUBUZQF
    
    tQPJOUu EBUBUZQF
    
    tUPUBMu EBUBUZQF
    
    tSBUFu %BUB1SPWJEFS
    DPOTU
    UZQF
    
    QBSTF%BUB EBUB 5PPMUJQ
     useData({ id: ‘ജ੗ࣻ’ })
51. %BUB1SPWJEFS
    DIJMESFO EBUB
    UZQF 5PPMUJQ
     useData({ id: ‘ജ੗ࣻ’ }) EBUB
    %BUB
    UZQF
    5ZQF
    
    3FBDU3FBDU/PEF DIJMESFO 3FOEFS
    1SPQT
    ಁఢ
52. )PPLT 3FOEFS
    1SPQT
53. )FBEMFTT6* SFBDU
    USBOTJUJPO
    HSPVQ
56. $IBSU1SPWJEFS -JOF$IBSU-PHJD VTF$IBSU-PHJD EBUB 6TFS$VTUPN6* $IBSU ۽૒ ؘ੉ఠ 6*
57. ਋ܻח
    ৵
    ର౟ܳ
    ଂїਸө
58. 2"
59. &0%