윈드서프AI - 구글 시트 흉내내기

구글 시트는 엑셀과 비슷하고 엄청 복잡한 기능 덩어리인데요.

친척격인 구글 제미나이 모델을 사용하여 일부 기능을 흉내내 보았습니다.
그냥 가로, 세로 셀과 셀 입력 기능, 사칙연산 및 괄호 연산 기능 정도인데요.
사실 이 것만 해도 꽤 복잡합니다.

직접 개발하자면 몇주 걸릴지도 모르지만 AI와 함께 협업하여 
AI가 수정 못하는 부분은 직접 디버깅해서 잡기도 하고
3시간 가량 소요된 것 같습니다.
이 정도 기능을 만드려면 AI만으로는 절대로 안되겠다고 깨닫겠더라구요 ㅎ..

과정이 너무 길어 그걸 공유하는 건 힘들것 같고, 입력했던 문구와 조치했던 내용,
최종 결과물 공유드리겠습니다~

프롬프트 목록

구글시트처럼 작동하는 웹페이지를 만들어줘. 기존 HTML 방식 말고 캔바스로 구현해줘, 라이브러리는 jquery를 사용하고 적당히 주석을 달아줘.

알겠습니다. 구글 시트와 유사하게 작동하는 웹페이지를 HTML 캔버스와 jQuery를 사용하여 만들어보겠습니다.
--
A열이 처음에 나와야하는데 잘려서 보이지 않아. 그리고 더블클릭해도 글자 입력이 안되는데 수정해줘.

A열이 잘려 보이는 문제와 더블클릭 시 글자 입력 기능을 수정하겠습니다.
--
G~Z열은 보이는데 A~F열은 여저히 스크롤바를 당길수 없고 잘려서 보여. 수정해줘.

알겠습니다. A~F 열이 잘려 보이고 가로 스크롤바가 나타나지 않는 문제를 수정하겠습니다.
--
( 이 부분은 간단한 문제인데 AI가 못 고쳐서 직접 수정하였습니다.)
--
이제 셀 선택과 화살표 이동 기능을 구현해보자. 한번 클릭하면 셀이 선택 상태가 되어 태두리가 보이게 하고 화살표 키로 이동하게 해줘. 이동할 때 스크롤바 영역을 벗어나면 스크롤시켜 보이도록 해줘.
--
알겠습니다. 사용자가 style.css에서 #canvas-container의 max-width 속성을 제거한 것을 확인했습니다. 이제 셀 선택, 화살표 키를 이용한 셀 이동, 그리고 이동 시 자동 스크롤 기능을 script.js에 구현하겠습니다.
--
스크롤되더라도 제목행열은 현재 위치에 고정해줘. 그리고 Enter 키 입력 후 편집한 다음에 Enter 키 누르면 값이 보관되게 해줘.

Revert
알겠습니다. 두 가지 요청 사항을 처리하겠습니다.
--
음 2가지 모두 안되는데 우선 제목행열이 모두 없어졌는데 그것부터 확인해줘.
아래 URL에서 확인 가능해.
http://localhost/sheet/

Revert
알겠습니다. 제목 행/열이 보이지 않는 문제를 확인해보겠습니다.
가장 먼저 의심되는 부분은 script.js에서 각 캔버스 요소들과 그 컨테이너들의 크기가 올바르게 설정되지 않았거나, CSS에 의해 숨겨졌을 가능성입니다.
--
금방 그건 해결되었고 이제 Enter 키 동작을 수정해줘. 현재 Enter 카를 누르면 편집은 되지만 다시 Enter 키가 작동하지 않아.

Revert
알겠습니다. Enter 키 입력 문제가 발생하는군요.
가장 유력한 원인은 전역 keydown 이벤트 핸들러와 동적으로 생성된 입력 필드의 keydown 이벤트 핸들러 간의 상호작용 문제입니다.
--
(이 부분도 AI 가 계속 수정을 못해서 디버그하여 고쳤습니다. 셀에서 Enter 쳐서 편집 완료를 끝내고 다시 편집이 시작되는 문제가 있어서,
상위로 전달되지 않도록 e.stopPropagation(); 기능을 넣어 수정하였습니다.)
--
덧셈 수식 기능을 넣어줘. 예를 들면 셀에 =A3+B3+C3 이라고 입력하면 복수 셀의 합계가 자동으로 나오도록 해줘.

Revert
알겠습니다. 덧셈 수식 기능을 추가하는 것은 꽤 큰 작업이지만, 단계별로 진행해보겠습니다.
--
수식 기능을 사칙연산과 괄호까지 작동하도록 확장해줘. 연산자 우선 순위에 따라 곱셈과 나눗셈은 덧셈과 뺄셈보다 먼저 연산 되도록 구현해줘.

Revert
알겠습니다. 사칙연산, 괄호, 연산자 우선 순위를 지원하도록 수식 기능을 확장하겠습니다. 이를 위해 다음 단계를 따릅니다:
토큰화 (Tokenization): 수식 문자열을 숫자, 셀 참조, 연산자, 괄호 등의 개별 토큰으로 분리합니다.
--
수식을 입력해도 결과가 표시가 안되네.
셀을 더블클릭하면 수식이 보이긴 해.
그리고 콘솔창에 이런 오류가 뜨는데 잘 작동하도록 수정해줘.

Uncaught ReferenceError: parseCellReference is not defined
    at evaluateFormula (script.js:187:33)
    at getCellValue (script.js:226:32) ..

Revert
오, 이런! 죄송합니다. 대규모 수식 로직을 업데이트하는 과정에서 parseCellReference 함수의 정의가 실수로 누락된 것 같습니다. 이 함수는 셀 참조 문자열(예: "A1")을 실제 행/열 인덱스로 변환하는 데 필수적입니다.
--
연산부분을 별도 스크립트파일로 분리하고 검토해서 수정해줘,

요청하신 대로 연산 부분을 별도의 스크립트 파일로 분리하고 코드를 정리하겠습니다.
--
  
( 이 부분에서 AI가 계속 수정을 못해서 디버그해 원인을 찾았습니다.
그 부분을 찝어서 AI에게 요청했지요. )
--
tokenize() 함수의 정규식 결과가 이상해. 
formula 입력 파라미터는 'A7+B7' 로 들어오는데 match 결과는 '+'뿐이야. 해당 함수를 확인해줘,@formula_parser.js 

네, 사용자님 말씀이 맞습니다. formula_parser.js 파일의 tokenize 함수에 있는 정규식이 잘못 작성되어 'A7', 'B7'과 같은 셀 참조를 올바르게 인식하지 못하고 '+'만 찾는 문제가 있습니다.
--
시트 상단에 입력상자를표시하고, 현재 선택된 셀의 값 또는 수식을 보여주게 해줘. 그리고 해당 입력상자를 수정하면 셀의 내용이 변경되게 해줘.

알겠습니다. 스프레드시트 상단에 선택된 셀의 내용을 보여주고 수정할 수 있는 수식 입력창을 추가하는 기능을 구현하겠습니다.

욕심같아서는 더 많은 기능을 붙이고 싶지만 점점 AI 코딩이 감당을 못하는 것 같아, 이 정도에서 그쳤습니다.
결과물은 아래 URL에서 확인해 주세요! 그래도 꽤 만족스럽습니다 ㅎㅎ

https://cray7.mycafe24.com/sheet/

AI 와 개발자 협업으로 만든, 기능 거의 없는(?) 구글시트 흉내내기 !

흥미롭게 보셨는지요. 오늘도 방문 감사합니다!