Bayan Flow 0.2.0: 기초 마무리 (i18n, RTL, 테스트, 그리고 작은 UX 개선)

Source: Dev.to

Quick recap

Bayan Flow는 React 19, Vite, Tailwind, 그리고 Framer Motion으로 만든 인터랙티브 알고리즘 시각화 도구입니다. 목표는 알고리즘을 단순히 정확하게 만드는 것이 아니라 직관적으로 느끼게 하는 것입니다.

Drivers for version 0.2.0

1. Accessibility / i18n – 교육용 도구에 영어만 지원하는 것은 어색했습니다. 프랑스어와 아랍어를 추가했습니다.
2. Polish / UX – 랜딩 페이지, 온보딩, 사운드, 전체 화면 모드, 그리고 세밀한 UI 동작을 개선했습니다.
3. Maintainability / infrastructure – 테스트, CI/CD, 그리고 의존성 자동화를 도입해 향후 기능을 안정적으로 유지할 수 있게 했습니다.

Internationalization and RTL

• i18next를 사용해 영어, 프랑스어, 아랍어를 지원했습니다. 문자열을 JSON으로 추출하는 과정은 간단했습니다.
• 아랍어는 실제 도전 과제를 제시했습니다: 레이아웃 방향.
• Tailwind 4는 RTL을 지원하지만, 의도적인 변경이 필요했습니다:
  • 방향성 클래스(ml-4, pl-2)를 논리적 클래스(ms-4, ps-2)로 교체했습니다.
  • 애니메이션 방향(예: slide‑in)을 감사하고, 텍스트 방향이 바뀔 때 반대로 동작하도록 수정했습니다.
  • 브라우저 로케일을 자동 감지하고, 수동으로 오버라이드할 수 있는 옵션을 구현했습니다.

Result: 앱이 LTR과 RTL 사이를 깔끔하게 전환합니다. 올바르게 동작하면 미묘하지만, 잘못되면 눈에 띄게 어색하기 때문에 지금 처리해 두면 나중에 큰 고통을 피할 수 있습니다.

Audio feedback (optional)

Tone.js를 이용해 선택적 오디오 피드백을 추가했습니다:

• 정렬 중 비교 시 비프음.
• 경로 찾기 탐색 시 그리드 기반 톤.
• 경로가 완성될 때 작은 코드.

모든 사운드는 “실험적”이라고 표시되어 있으며 비활성화할 수 있습니다. 피드백을 환영합니다.

UI polish and UX improvements

• 히어로와 기능 섹션을 갖춘 Landing page.
• Roadmap preview와 기본 온보딩 카피.
• React Router를 사용해 랜딩, 시각화, 로드맵 페이지를 구성, 처음 방문하는 사용자와 교사에게 접근성을 높였습니다.
• Fullscreen mode를 도입해 다른 컴포넌트를 숨기고 시각화에 집중할 수 있습니다.
• 필요할 때 나타나고 사용하지 않을 때 서서히 사라지는 Auto‑hiding legend panel.
• 다양한 화면 비율(Windows 및 비‑Linux)에서 컨트롤‑패널 레이아웃을 고정했습니다.
• 발견성과 명확성을 높이기 위한 작은 접근성 개선을 적용했습니다.

Infrastructure and tests

• Vitest: 31개의 테스트 파일에 걸쳐 666개의 테스트(컴포넌트, 훅, 유틸리티) 수행.
• CI/CD 전면 개편: Netlify 브랜치 배포, PR 보호, 그리고 커버리지를 위한 Codecov.
• Renovate를 설정해 의존성 업데이트를 자동화했습니다.

커버리지는 아직 100 %는 아니지만, 핵심 흐름을 깨뜨리지 않고 자신 있게 리팩터링할 수 있을 정도로 충분합니다.

Future work

기반이 견고해졌으니 다음 단계는 다음과 같습니다:

• 더 많은 정렬 및 경로 찾기 알고리즘 추가.
• 복잡도 분석 개선.
• 파이썬 코드를 나란히 보여주는 기능을 통합해 사용자가 시각화와 구현을 동시에 볼 수 있게 하기.

Links

• App:
• GitHub repo:
• Product Hunt: