백 마디 말보다 한 장의 그림이 나을 때가 있다. 코딩에서도 마찬가지다. 복잡한 조건문(if-else)이나 데이터가 오가는 과정을 눈으로 확인하면 논리적 오류를 훨씬 쉽게 찾아낼 수 있다. Cursor에서는 Mermaid라는 도구를 통해 이 과정을 자동화할 수 있다.
1. Mermaid란 무엇인가?
Mermaid는 텍스트 기반의 다이어그램 생성 도구다. 마우스로 상자를 그리고 선을 연결할 필요 없이, 간단한 문법만 적으면 예쁜 순서도나 그래프로 바꿔준다.
- 텍스트로 그리기:
graph TD; A-->B;라고 적으면 A에서 B로 가는 화살표가 그려진다. - Cursor와의 궁합: Cursor의 AI는 Mermaid 문법을 완벽하게 이해한다. "이 코드의 실행 흐름을 Mermaid 다이어그램으로 그려줘"라고 하면 즉시 시각화된 자료를 만들어준다.
2. 시각화를 활용한 AI 워크플로우
단순히 다 그린 코드를 시각화하는 것을 넘어, 설계 단계부터 그림을 활용하는 것이 진짜 실력이다.
- 설계 (Plan): 코드를 짜기 전, AI에게 "사용자가 로그인하고 프로필을 수정하는 과정을 Mermaid 순서도로 먼저 그려줘"라고 시킨다.
- 검토 (Review): 그려진 그림을 보고 "아, 이 단계에서 보안 확인이 빠졌네?"라고 판단하여 설계를 수정한다.
- 구현 (Implement): 확정된 다이어그램을 바탕으로 "이 그림대로 코드를 작성해줘"라고 명령한다.
이런 방식을 'Design-First' 코딩이라고 하며, 대규모 프로젝트에서 실수를 줄이는 가장 확실한 방법이다.
3. 가장 많이 쓰이는 다이어그램 3종
고등학생 수준에서 가장 유용하게 쓸 수 있는 유형은 다음과 같다.
- Flowchart (순서도): 프로그램의 논리 흐름(Yes/No)을 파악할 때 유용하다.
- Sequence Diagram (시퀀스 다이어그램): 사용자, 서버, 데이터베이스 사이에서 메시지가 어떤 순서로 오가는지 보여준다.
- ER Diagram (개체-관계도): 데이터베이스 테이블들이 서로 어떻게 연결되어 있는지 한눈에 보여준다.
4. 실전 활용 팁: 코드 분석기
이미 남이 짠 복잡한 코드를 분석해야 할 때도 Mermaid는 빛을 발한다.
- 채팅창 활용:
Cmd + L을 누르고 특정 코드를 드래그한 뒤, "이 함수의 로직을 이해하기 쉽게 시각화해줘"라고 입력해 보자. - 문서화 자동화: 나중에 코드를 다시 볼 때를 대비해, AI가 그려준 다이어그램을 코드 상단의 주석으로 넣어두면 훌륭한 설명서가 된다.
5. 요약: 눈으로 보고, 머리로 설계하자
Mermaid와 Cursor의 결합은 개발자의 시야를 넓혀준다.
- 텍스트의 시각화: 복잡한 코드를 그림으로 변환하여 이해도를 높인다.
- 설계 우선주의: 그림으로 먼저 로직을 검증한 뒤 코드를 짠다.
- 커뮤니케이션: 팀 프로젝트에서 친구에게 내 코드의 구조를 가장 빠르게 설명할 수 있다.