준PM
☕ 커피챗 오픈
🏅 베스트오브베스트

랜딩페이지에 테이블클리닉 기능 추가하고 깃허브에 배포하기

소개

지난 번 만들었던 페이지를 그냥 배포하기가 좀 밋밋한 것 같아서, 스마트 기능을 추가해보고 싶었다. 혹시 그게 가능한지 물어보니 가능하다고 자신있게 한다! 그래서 일을 시켜보고, 어떻게 하는지 두고봤다.

진행 방법

랜딩페이지에 추가하고 싶었던 내용(기능)은 사용자사 제시하는 테이블(엑셀)의 클리닉을 체험하게 하고 싶었다. Claude에게 원하는 내용을 간략히 설명해주고 이게 가능한지 물어보니 세계 최초 "AI 테이블 클리닉"이라고 추켜세우며 자신있게 가능하단다! 그래서 먼저 랜딩페이지 통합방안을 마련하라고 요청했다.

사용한 도구는 Claude Code와 Cursor다.

```mermaid
graph TB
    A[사용자 업로드] --> B[이미지 전처리]
    B --> C[OCR/테이블 감지]
    C --> D[LLM 분석]
    D --> E[테이블 구조 최적화]
    E --> F[파일 생성]
    F --> G[다운로드 제공]
    
    subgraph "AI 처리 파이프라인"
        C --> C1[이미지 분석 AI]
        D --> D1[GPT-4V/Claude]
        E --> E1[데이터 모델링 AI]
    end
    
    subgraph "파일 생성 엔진"
        F --> F1[Excel Generator]
        F --> F2[Access Generator]
        F --> F3[VBA Code Generator]
    end
```

스마트테이블 클리닉 기능

사용자가 자신이 사용하는 표 형식의 엑셀서식 파일이나 이미지를 업로드

-> OCR이 테이블을 감지

-> AI가 분석하고 테이블 구조 최적화 진행

-> VBA(BAS 파일), Excel(openpyxl), Access 파일 생성 후 다운로드

> @table-excelpro\table-clinic-architecture.md 이걸 참고해서 페이지를 수정하고 싶은데 가능할까?

● 네, 가능합니다! table-clinic-architecture.md 파일의 아키텍처 내용을 참고해서 ExcelPro 페이지를 수정할 수  있습니다.

● 아키텍처 문서를 기반으로 다음과 같은 개선 사항을 제안합니다:

  주요 개선 포인트:

  1. 스마트 테이블 클리닉 기능 - 이미지에서 테이블을 자동 감지하고 분석하는 신기능
  2. AI 분석 파이프라인 - GPT-4V/Claude를 활용한 테이블 구조 최적화
  3. OCR 및 이미지 처리 - 테이블 이미지를 스캔하여 자동으로 엑셀로 변환
  4. 데이터베이스 설계 자동화 - 정규화와 관계 설정까지 자동으로 처리

● 현재 페이지를 분석해보니 다음과 같은 개선이 필요합니다:

  현재 페이지의 한계:
  - 단순한 VBA 코드 생성에만 초점
  - 수동 엑셀 파일 업로드 방식
  - AI 기능의 부재

  아키텍처 기반 개선안:
  1. 이미지 스캔 기능 추가 - 종이/PDF 테이블을 스캔하여 자동 변환
  2. AI 테이블 분석 - LLM이 데이터 구조를 분석하고 최적화 제안
  3. 스마트 클리닉 - 테이블 설계 문제점 진단 및 개선
  4. 자동 정규화 - 데이터베이스 설계 원칙에 따른 구조 최적화

  어떤 부분부터 시작하시겠습니까?

차근차근 시작해보자고 했는데 잠시 후에 다음과 같은 내용을 추가했다고 알려준다.

  추가된 내용:
  - 인터랙티브 OCR 데모 섹션 - 실제 파일 업로드와 샘플 이미지 체험 기능
  - 드래그 앤 드롭 업로드 영역 - 직관적인 파일 업로드 인터페이스
  - 실시간 처리 상태 표시 - 4단계 처리 과정 시각화
  - 결과 미리보기 탭 - 추출된 데이터, AI 최적화, 생성된 코드를 탭으로 분리
  - OCR 핵심 기능 설명 - 고정밀 텍스트 인식, 스마트 테이블 감지, 실시간 처리
  - 다운로드 액션 - Excel, Access, VBA 코드 다운로드 버튼

페이지가 개선된 걸 확인했다. 그 다음 순서는 깃허브 배포인데, 해본적이 없었다. 그래서 배운대로 Git을 초기화하고 프로젝트를 배포해보자. 그랬더니 Git 초기화부터 배포까지 진행하겠단다. 변경사항을 커밋하고 바로 접속 URL을 제시해 줬다.

깃 배포를 해 본적이 없어서 어떻게 해야할지 막막했는데, Git 초기화 및 배포가 어느새 끝났다고 한다!

한국어가있는 웹 사이트의 스크린 샷

결과와 배운 점

랜딩페이지니까 링크나 화면전환 정도만 가능한 줄로만 알고 있었는데, 파이썬으로 짠 기능까지도 붙여줄 줄은 몰랐다. Access 파일도 제공해준다고 했지만, 링크를 제공해 준 곳은 없어서 다시 요구해보아야 겠다. 그리고 AI가 뭘 어떻게 한 건지 시간을 가지고 복기해 봐야겠다.

2개의 답글
지피터스 뉴스레터

이번 주 AI, 딱 쓸 것만

매주 월요일 오후,
읽고 바로 써먹을 AI 소식만