RSS DEV 커뮤니티
팔로우
프롬프트에서 실용적인 결과까지: Claude.ai + Mermaid.live를 활용한 HandyFEM의 사용자 흐름 진화
저자는 HandyFEM의 탐색 및 사용자 여정을 다이어그램을 사용하여 단일 진실 소스를 만들고자 합니다. RapidChart를 사용한 초기 시도는 실패했고, 재현 가능한 다이어그램을 위해 Mermaid로 전환했습니다. Claude는 전체 앱 컨텍스트를 통합하여 Mermaid 다이어그램을 생성하고 개선하는 데 사용되었습니다. 최종 다이어그램은 화면, 양식, 의사 결정 지점과 같은 다양한 UI 요소를 나타내는 색상 코딩이 적용되었습니다. 저자는 역할 기반 분기를 포함하여 흐름을 보여주는 간소화된 Mermaid 코드 조각을 제공합니다. 텍스트 기반 코드를 사용하여 Git에서 다이어그램을 버전 관리하는 것은 이 접근 방식의 주요 이점입니다. 저자는 Claude를 사용할 때 프롬프트 형성이 중요하며, 역할별로 반복하는 것을 강조합니다. 이 다이어그램은 디자이너, 개발자 및 이해 관계자 간의 의사 소통을 개선합니다. 향후 단계에는 메가 다이어그램을 기능 파일로 분할하고 다이어그램 노드를 구현 리소스에 연결하는 것이 포함됩니다. 저자는 Claude와 같은 LLM을 Mermaid와 함께 사용하는 것이 복잡한 애플리케이션을 매핑하는 데 도움이 된다고 결론 내립니다.
