OPEN GRID 업그레이드 기획 — 4가지 없는 그리드 품격 갖추기 (설계 및 의사결정 STD)

2026. 07. 01 · OPEN GRID

무료 웹 그리드 OPEN GRID에, 그동안 값비싼 상용 제품에만 있던 4가지 기능을 더하기로 했습니다.

이번에 더해지는 4가지
① 범위 선택 + 채우기 핸들 — 엑셀처럼 여러 칸을 드래그로 고르고, 모서리를 잡아끌어 값을 주르륵 채우기
② 마스터/디테일 — 한 줄을 펼치면 그 아래에 상세 내용(작은 표 등)이 열리는 기능
③ 수식 셀 — 칸에 =A1+B2 같은 계산식을 넣으면 자동 계산
④ 통합 차트 — 표의 데이터를 골라 바로 막대·선·원 그래프로

0. 의사결정 상태전이도

전문가 패널 의사결정 상태전이도 — ① 문제정의 → ② 현행실측 → ③ 설계 → ④ 교차검증 → ⑤ 이슈판정 →(문제 있으면) ⑥ 수렴/개정 → 재검증 … 문제 0이 되어야 ⑦ 최종 GO · 이미지를 클릭하면 확대, Esc로 닫기

1. 전체 그림 — 무엇을 어디에 얹나 (아키텍처)

집을 리모델링할 때 뼈대는 그대로 두고 방을 더하듯, 기존 코드는 건드리지 않고 그 위에 새 기능을 얹는 방식입니다. 그림에서 회색은 원래 있던 부품(그대로 유지), 파랑은 새로 까는 공용 기반, 초록은 4개의 새 기능입니다.

통합 아키텍처 — 회색=기존 코어(무수정) · 파랑=공용 기반(신규) · 초록=4대 기능. 기존을 부수지 않는 “덧붙임” 설계 · 이미지를 클릭하면 확대, Esc로 닫기

💡 왜 이렇게? 기존 동작을 안 건드려야 지금 쓰는 사용자에게 문제가 생기지 않습니다. 그래서 새 기능은 “옵션·메서드·확장 슬롯”으로만 더합니다.

2. 부품들의 데이터 모양 (타입 설계)

조금 더 안쪽 이야기입니다. 각 기능이 다루는 정보의 구조(설계도 부품 명세)예요. 예를 들어 “선택한 범위”는 어디서 어디까지인지, “펼친 상세”는 어떤 상태를 기억하는지, “수식”은 무엇을 참조하는지를 정해 둡니다. 가볍게 훑고 넘어가셔도 됩니다.

핵심 타입 모델 — 각 기능이 다루는 핵심 데이터 구조. 공통 부품(FlatRowModel·CellRange)을 여러 기능이 함께 씀 · 이미지를 클릭하면 확대, Esc로 닫기

3. “채우기”가 일어날 때 속에서 벌어지는 일

엑셀에서 모서리를 잡아끌어 값을 채우는 그 동작입니다. 겉보기엔 간단하지만, 안에서는 세 가지를 조심합니다. ① 엉뚱한 줄(펼침 영역 등)에 잘못 쓰지 않도록 먼저 확인, ② 수백 칸을 한꺼번에 처리해 화면이 버벅이지 않게, ③ 채우다가 수식이 든 칸을 만나면 함부로 지우지 않고 안내합니다.

채우기 커밋 흐름 — 채우기 → (안전 확인) → 한 번에 처리 → 필요한 계산만 다시 → 화면 1회 갱신 · 이미지를 클릭하면 확대, Esc로 닫기

💡 검증에서 잡힌 가장 위험한 문제가 바로 여기였습니다 — 자칫 엉뚱한 줄에 값이 써질 수 있었죠. 그래서 “쓰기 전에 이 줄이 진짜 데이터 줄인지” 항상 확인하도록 공통 규칙을 만들었습니다.

4. 펼친 상세가 화면을 다시 그려도 안 사라지게

한 줄을 펼치면 그 안에 작은 표나 입력폼이 들어갈 수 있습니다. 문제는 그리드가 스크롤·수정 때마다 화면을 통째로 다시 그린다는 것. 자칫 펼쳐 둔 내용이 매번 사라지겠죠. 그래서 “지우는 게 아니라 잠깐 떼었다 다시 붙이는” 방식으로 상태(입력 중이던 값·스크롤 위치)를 지킵니다.

상세 펼침·재렌더 생존 — 펼친 내용을 “분리했다 재부착” → 다시 그려도 입력·스크롤 유지 · 이미지를 클릭하면 확대, Esc로 닫기

5. 수식이 자동으로 다시 계산되는 방식

칸에 =A1+B2를 넣으면, A1이나 B2가 바뀔 때 이 칸도 자동으로 다시 계산돼야 합니다. 중요한 건 화면에 안 보이는 칸까지 정확해야 한다는 점(그리드는 보이는 부분만 그리거든요). 그래서 계산은 화면과 따로 돌리고, 결과만 화면이 가져다 씁니다. 정렬을 해도 참조가 엉키지 않고, 빙글빙글 도는 순환참조는 안전하게 잡아냅니다.

수식 재계산 흐름 — 수식 입력 → 의존 관계 따라 필요한 것만 다시 계산(화면과 분리) → 결과 표시 · 이미지를 클릭하면 확대, Esc로 닫기

💡 정직함 원칙: 숫자가 아닌 값(예: “abc”)에 곱하기를 하면 조용히 0으로 바꾸지 않고 #VALUE 오류로 분명히 알려줍니다. 틀린 숫자를 맞는 척 보여주지 않기 위해서예요.

6. 표 데이터를 바로 차트로

선택한 데이터나 열을 골라 막대·선·원 그래프로 바로 그립니다. 기본 차트는 추가 설치 없이 되고, 더 화려한 차트가 필요하면 전문 차트 라이브러리를 그때만 불러오는 “갈아끼우기” 구조입니다. 눈이 불편한 분을 위해 차트와 똑같은 내용을 표로도 제공하는 것을 필수로 넣었습니다.

차트 생성 흐름 — 데이터 읽기 → 차트 모델로 변환 → 그리기(+대체 표) → 데이터 바뀌면 자동 갱신 · 이미지를 클릭하면 확대, Esc로 닫기

7. 만드는 순서 — 위험한 것부터 실험

마지막은 구현 순서입니다. 가장 불확실하고 위험한 부분(대용량 수식 계산 속도, 높이가 자유로운 펼침)을 먼저 작은 실험(스파이크)으로 검증한 뒤, 공용 기반 → 기능 순서로 만듭니다. 그리고 각 단계마다 “정해 둔 합격 기준”을 통과해야 다음으로 넘어갑니다.

구현 시퀀싱·게이트 — 위험 실험 먼저 → 공용 기반 → 기능(범위·수식·상세·차트) → 각 단계 합격 기준 통과 · 이미지를 클릭하면 확대, Esc로 닫기

이 기획은 설계·검증 단계까지 완료된 상태이며(치명·중대 이슈 0, 전원 통과), 실제 구현은 위 “위험 실험”을 통과한 뒤 진행됩니다. OPEN GRID는 MIT 라이선스 오픈소스입니다.