[DevLogs][React Native] 마크다운 뷰어 MarkY 개발기 1

최근 모바일에서 마크다운 파일을 읽을 일이 생겼습니다. 기존에 서비스 중인 앱들이 많이 있지만, 이 주제가 최근에 관심 있던 React Native를 배우기 위한 가벼운 토이 프로젝트로 적절하다고 생각되어 자체적으로 앱을 개발해보기로 했습니다.

기능 정의

첫 단계로 클로드와 함께 이번 앱에 필요한 기능을 아래와 같이 정리하였습니다.

필수 기능

• 파일 불러오기 (갤러리, 파일 탐색기)
• 마크다운 렌더링
• 스크롤 가능한 뷰어

심화 기능

실용성 측면

• 최근 열어본 파일 목록: 자주 보는 파일에 빠르게 접근
• 즐겨찾기 / 북마크: 중요한 문서를 따로 저장
• 다크모드 / 라이트모드: 야간 및 환경에 따라 보기 편하게

편의성 측면

• 목차(TOC) 생성: 긴 문서 내에서 빠른 네비게이션
• 검색 기능: 문서 내 텍스트 검색
• 폰트 크기 조절: 가독성 향상

개발 학습 측면

• 클라우드 동기화 (Google Drive, Dropbox): 외부 API 연동 경험
• 파일 편집 모드: 간단한 마크다운 에디터 구현
• 내보내기 (HTML, PDF): 파일 포맷 처리 경험

개발 계획 수립

위 기능을 기반으로 아래와 같이 개발 계획을 세웠습니다.

• 1단계: 기본 뷰어 구현 + 최근 파일 목록 + 다크모드 지원
• 2단계: 목차(TOC) + 문서 내 검색 기능 추가

이후 시간이 허락 된다면, 클라우드 동기화나 내보내기 기능까지 확장해볼 예정입니다.

작업 분할: 태스크 기반 개발 시도

최근 LLM 기반 에이전트를 사용해 개발을 자동화하거나 보조하는 사례가 많아졌습니다. 저도 해당 기능을 잘 활용할 수 있도록 관심있게 지켜보고 또 유용해 보이는 방식은 직접 사용해보고 있습니다.

그 중에서도 LLM 기반 에이전트가 잘 이해할 수 있도록 프로젝트를 메인 태스크와 하위 태스크로 나눠서 단계별로 작업 지시를 내리는 방식이 인상 깊었습니다. 이 방식은 LLM 기반 에이전트에게 업무를 명확하게 지시하는 것 뿐만 아니라, 실제로 개발을 진행할 때도 개발 생산성에 큰 도움이 될 것 같다고 느꼈습니다. 그래서 이번 프로젝트는 태스크 기반의 개발도 같이 시도해볼 예정입니다.

아래는 클로드와 함께 작성한 태크스 목록입니다. 아래 태스트에 따라 개발을 진행하며 개발기를 공유하도록 하겠습니다.

1단계: MVP (핵심 기능)

메인 태스크 1: 프로젝트 환경 구축

• React Native 개발 환경 셋업
• Expo CLI 설치 및 프로젝트 생성
• 필요한 라이브러리 설치
• 기본 프로젝트 구조 설계

메인 태스크 2: 파일 읽기 및 마크다운 렌더링

• 파일 선택 기능 구현
  • 갤러리/파일 탐색기에서 .md 파일 선택
  • 파일 권한 처리
• 파일 내용 읽기 기능
  • 선택한 파일의 텍스트 내용 로드
  • 인코딩 처리 (UTF-8)
• 마크다운 렌더링 구현
  • 마크다운 텍스트를 HTML로 변환
  • 스타일링 적용 (기본 테마)
• 스크롤 가능한 뷰어 UI 구성

메인 태스크 3: 최근 파일 목록 기능

• 최근 열어본 파일 저장 로직
  • AsyncStorage에 파일 경로와 메타데이터 저장
  • 중복 제거 및 개수 제한 (예: 최대 10개)
• 최근 파일 목록 화면 구현
  • 파일명, 수정일시 표시
  • 탭하면 해당 파일 열기
• 최근 파일 삭제 기능 (스와이프 투 딜리트)

메인 태스크 4: 다크모드/라이트모드

• 테마 상태 관리 구현
  • Context API 또는 useState로 테마 상태 관리
  • AsyncStorage에 테마 설정 저장
• 다크/라이트 테마 스타일 정의
  • 배경색, 텍스트 색상, 마크다운 스타일 각각 정의
• 테마 토글 버튼 UI 구현
• 앱 시작 시 저장된 테마 설정 로드

2단계: 고급 기능

메인 태스크 5: 목차(TOC) 자동 생성

• 마크다운 헤딩 파싱 로직
  • 정규식으로 # ## ### 헤딩 추출
  • 헤딩 레벨과 텍스트 매핑
• 목차 네비게이션 UI 구현
  • 드로어 또는 사이드바 형태
  • 계층 구조로 헤딩 표시
• 목차 클릭 시 해당 섹션으로 스크롤
  • ScrollView ref 활용
  • 부드러운 스크롤 애니메이션

메인 태스크 6: 문서 내 검색 기능=

• 검색 UI 구현
  • 검색창 (TextInput)
  • 검색 결과 개수 표시
  • 이전/다음 결과 네비게이션 버튼
• 텍스트 검색 로직
  • 대소문자 구분 없는 검색
  • 정규식 활용한 패턴 매칭
• 검색 결과 하이라이팅
  • 매칭된 텍스트 강조 표시
  • 현재 선택된 결과 구분
• 검색 결과 네비게이션
  • 다음/이전 검색 결과로 자동 스크롤