개요

• 작성한 포스트를 볼 때 가독성이 떨어진다는 느낌을 받았음. h태그 위에 패딩을 추가해봤지만 그래도 아쉬움이 있어서,
  슬라이드 형식으로 문맥을 나누어본다면 포스트로 볼 때도 가독성 좋게 작성할 수 있을 것 같아 미뤄뒀던 기능 추가를 하기로 결심하게 됨.
• gemini cli을 처음으로 활용해봄.

구현

요구사항

• 기존 포스트 형식의 내용을 그대로 사용해 문맥별로 나눠서 포스트 - 슬라이드 2가지 형식이 모두 유효했으면 좋겠음
• 주소창에 /slide만 붙이면 바로 슬라이드가 보여야 됨.
• 링크 기반으로 슬라이드 페이지가 나뉘면 안 됨. 브라우저 히스토리가 쉽게 더러워지고 뒤로가기가 힘들어진다는 단점을 느낀 경험이 있음.
• 최대한 페이지에 스크롤이 안 나오도록 높이 조절을 해야함. 웹 환경이다보니 슬라이드에 스크롤이 있다고해서 문제될건 없지만 통일성을 부여하고 싶음.

1차 구현

• gemini cli 무료버전을 사용해 슬라이드 형식으로 볼 수 있게 만들어달라고 한 뒤 여러가지 명령을 함.
• 일단 보기좋은 슬라이드 기능이 추가됐음. 근데 코드블럭 크기라든가 테이블, 수식 등 표현에 아쉬움이 있어서 여러번의 시도 끝에
  애가 자꾸 내 말을 못 알아 먹어서 아에 갈아엎기로 생각.
• 무료버전 토큰도 다 소모해버렸음

2차 구현, gemini cli pro버전

• 좀 더 체계적으로 mdx 문법을 분류하고서 gemini에게 명령하기로 함.
• 슬라이드 생성 방식에 대한 구조를 직접 명령내림.

단계적 슬라이드 생성

• 슬라이드 생성은 기본적으로, mdx 텍스트 일부를 문맥단위로 잘라서 만듦.
• 문맥 단위는 기본적으로 # 헤더 태그 기준
• 슬라이드 생성 단계를 문법 단위로의 원소 구분, 헤더 단위로의 섹션 구분을 통한 원소 모음, 섹션의 내용을 정리한 슬라이드 생성으로 구분지음

원소(문법) 구분

1. mdx 문법은 기본 문법, 복합 문법, 순수 html로 구분 후 각 문법별로 원소 처리
2. 기본 문법은 한 줄로 표현이 되는, # 헤딩이나 - ul 같은 요소
3. 복합 문법은 코드블럭이나 테이블, 이미지, 수식과 같은 높이가 가변적인 요소
4. plain html은 <로 시작하는 요소

• 위와 같은 구분으로 mdx파일은 원소단위로 구분지어 저장함.

섹션 구분 및 병합

• 헤더단위로 그 헤더에 속하는 원소들, 하단의 내용들을 전부 합쳐서 하나의 섹션으로 구분 지음
• 특수 규칙: h5h7 태그들은 섹션이 그 이전 섹션이 병합이 될 수 있음. 즉, h1h4태그의 섹션은 무조건적으로 새 섹션, 슬라이드로 생성되고 h5~h7섹션들은 구조에 따라 하나의 슬라이드로 가중치를 넘지 않는 선에서 병합이 될 수 있음.

슬라이드 분할 및 생성

• 섹션요소들을 가중치 계산 후 가중치를 넘기면 그 다음 슬라이드로 넘어가는 식으로 분할 시킴.
• 현재 복합 원소의 가중치 처리 구현은 미구현 상태임. 각 요소별로(코드블럭, 이미지, 테이블...) 최대 높이를 지정하는 방식으로 개선한 뒤 가중치 부여하고서 처리해야할 것 같음

마무리

• AI가 프로토타입은 아주 잘 생성해줌. 하지만 세부적인 요소들에 대해선 매우 답답할 정도로 작동이 마음에 안 듦.
• ai에 대해 아쉬운 점은, ctrl-z 되돌리기가 불가능함. 세부적인 수치들 수정한 것을 자꾸 스스로 복원, 수정 시킴. 코드 작업 단위 분할을 안 함.
• 시각적인 ui배치 슬라이드 기능을 구현하는 것이지만, 내용 자체는 텍스트 파일 파싱인데 매우 불만족스러운 결과물을 냄. 결국 직접 코드 읽어보면서 직접 구조 설계 후 특정 파싱 부분은 직접 구현하는 등 번거로움이 많았음.
• 그래도 빠르게 슬라이드, 프린트 기능 구현해준 것 자체는 빠르게 잘 만들어줌.
• 복합 원소에 대한 가중치를 구현하기 위해 코드블럭처럼 이미지, 테이블 등에 대한 래퍼 컴포넌트를 만들어 최대 높이를 조절할 수 있도록 해야할 것 같음.