InkPad :: 웹 기반 그림판

11 Jun 2025

Reading time ~4 minutes

모바일 그림판 및 갤러리 웹 애플리케이션

바로가기

1. 프로젝트 개요

본 프로젝트는 웹 기반의 그림판 애플리케이션으로, 사용자가 그림을 그리고 이를 서버에 저장, 수정, 삭제할 수 있는 기능을 제공합니다. 또한, 저장된 그림들을 갤러리 형태로 목록을 보고, 특정 그림을 선택하여 크게 볼 수 있는 기능을 포함합니다. 모바일 친화적인 반응형 디자인과 함께 현대적인 UI/UX를 지향합니다.

2. 주요 기능

2.1. 그림판

드로잉 도구: 펜, 지우개 기본 도구 제공.
도구 옵션: 선 색상 변경 (컬러 피커), 선 굵기 조절 (슬라이더).
캔버스 액션: 실행 취소 (Undo), 다시 실행 (Redo), 캔버스 전체 지우기.
고해상도 지원: 내부 캔버스 해상도 1000x1000 픽셀로 설정하여 그림 품질 향상.
서버 연동:
- 새 그림 저장: 그림 제목 입력 후 이미지(PNG)와 압축된 그림 데이터(gzipped JSON)를 서버에 POST 요청으로 저장. 성공 시 mainUuid를 클립보드에 복사하고 메시지로 ID 안내.
- 기존 그림 수정: 로드된 그림 수정 후 PUT 요청으로 서버에 업데이트.
- 그림 삭제: DELETE 요청으로 서버에서 현재 그림 삭제 후 갤러리 페이지로 이동.
- ID로 불러오기: mainUuid를 직접 입력하여 특정 그림을 서버에서 불러와 편집.
- URL 연동: URL 파라미터 (?mainUuid=...)를 통해 특정 그림을 로드하여 편집 가능. 저장/로드 시 URL 업데이트.
로컬 파일 기능:
- 현재 그림을 로컬 PNG 이미지 파일로 저장.
- 로컬의 .json 또는 .drawing.gz 파일을 불러와 그림판에 로드 (서버 연동 해제).
사용자 경험:
- 터치 인터페이스 지원 및 모바일 반응형 디자인.
- user-scalable=no 및 overscroll-behavior: none 등으로 모바일 드로잉 경험 최적화.
- 키보드 단축키 지원 (Ctrl+Z, Ctrl+Y, Ctrl+S).
- 상태 메시지 시스템 (성공, 오류, 정보 알림).
- localStorage를 사용하여 사용자가 관리하는 그림 정보 (ID, 이름 등) 일부 저장.

2.2. 갤러리

그림 목록 표시: 저장된 그림들을 카드 형태로 표시 (이미지, 제목, 생성 날짜).
무한 스크롤: 스크롤 시 다음 그림 목록을 10~12개씩 동적으로 로드.
초기 화면 채우기: PC 화면에서는 처음 로드 시 화면 높이를 채울 만큼의 그림을 미리 로드.
그림 보기 연동: 각 그림 카드를 클릭하면 view.html로 이동하여 해당 그림의 상세 정보(이미지 URL, 제목, 날짜)를 전달.
ID로 그림 열기: 헤더의 “ID로 불러오기” 버튼을 통해 mainUuid를 입력받아 draw.html에서 해당 그림을 바로 열 수 있도록 링크.
새 그림 작성 링크: “새 그림” 버튼을 통해 draw.html로 이동.

2.3. 그림 상세 보기

갤러리에서 선택한 그림을 큰 이미지로 표시.
그림 제목 및 생성 날짜 정보 제공.
URL 공유: “공유하기” 버튼 클릭 시 현재 페이지의 URL(이미지 경로에 publicId 사용, mainUuid 미노출)을 클립보드에 복사.
constants.js를 사용하여 이미지 기본 경로 관리.

2.4. 서버

API 제공:
- POST /api/drawings: 새 그림 저장 (이미지 + 압축된 JSON 데이터). mainUuid 및 publicId 생성.
- GET /api/drawings: 그림 목록 조회 (페이지네이션 지원: page, limit 파라미터). 각 항목에 publicId, yearMonth, displayName, imageUrl, createdAt 포함.
- GET /api/drawings/:mainUuid/json: 특정 그림의 JSON 데이터 조회.
- PUT /api/drawings/:mainUuid: 기존 그림 업데이트.
- DELETE /api/drawings/:mainUuid: 특정 그림 삭제.
데이터 저장:
- 드로잉 데이터(메타데이터)는 uploads/db.json 파일에 LowDB를 사용하여 관리.
- 실제 파일 저장 구조:
  - 이미지: uploads/images/YYYY.MM/publicId.png
  - 그림 데이터: uploads/json/YYYY.MM/mainUuid.drawing.gz (또는 .json)
정적 파일 서비스: 업로드된 이미지 및 public 폴더 내 정적 에셋(HTML, JS, CSS) 제공.

3. 기술 스택

프론트엔드:
- HTML5, CSS3, JavaScript (ES6+)
- Tailwind CSS (CDN 및 custom-styles.css 사용)
- Pako.js (데이터 압축/해제)
백엔드:
- Node.js
- Express.js
- LowDB (JSON 파일 기반 데이터베이스)
- fs-extra (파일 시스템 작업)
- uuid (고유 ID 생성)
폰트: Google Fonts (Inter)

4. 프로젝트 파일 구조 (주요 파일)

├── server.js               # 메인 서버 파일
├── package.json
├── package-lock.json
├── public/                 # 클라이언트 사이드 정적 파일
│   ├── js/          # 메인 페이지
│   │   ├── draw.js             # 그림판 페이지 스크립트
│   │   ├── list.js             # 갤러리 페이지 스크립트
│   │   ├── view.js             # 그림 상세 보기 스크립트
│   │   └── constants.js        # 공통 상수 (예: 이미지 경로)
|   ├── css/         # 메인 페이지
│   │    └── custom-styles.css   # 추가 사용자 정의 CSS
│   ├── draw.html           # 그림판 페이지
│   ├── list.html           # 갤러리 목록 페이지
│   └── view.html           # 그림 상세 보기 페이지
├── uploads/                # 서버 업로드 파일 및 데이터베이스
│    ├── images/             # 이미지 저장 디렉토리
│         └── YYYY.MM/        # 연도.월별 하위 디렉토리
│               └── publicId.png
│    ├── json/               # 그림 데이터(JSON) 저장 디렉토리
│    └── YYYY.MM/        # 연도.월별 하위 디렉토리
│         └── mainUuid.drawing.gz
└── db.json             # LowDB 데이터베이스 파일 (드로잉 메타데이터)

5. 설정 및 실행 방법

프로젝트 클론 및 의존성 설치:

git clone <repository-url>
cd <project-directory>
npm install

서버 실행:
```
node server.js
```
서버는 기본적으로 http://localhost:3000 에서 실행됩니다.
애플리케이션 접속:
- 그림판: http://localhost:3000/draw.html
- 갤러리: http://localhost:3000/gallery (또는 list.html 직접 접근)

6. 주요 API 엔드포인트

POST /api/drawings: 새 그림 저장.
GET /api/drawings: 그림 목록 조회 (페이지네이션: ?page=1&limit=10).
GET /api/drawings/:mainUuid/json: 특정 그림 데이터(JSON) 조회.
PUT /api/drawings/:mainUuid: 기존 그림 업데이트.
DELETE /api/drawings/:mainUuid: 특정 그림 삭제.
정적 이미지 제공: /uploads/images/YYYY.MM/publicId.png

7. 향후 개선 사항 (선택적)

그림판 기능 확장 (다양한 브러시, 도형, 텍스트 입력 등).
서버 사이드 이미지 리사이징 및 썸네일 생성.