<div id="readability-page-1" class="page"><div role="banner"> <div>  <h4>11 Jun 2025</h4> <p> <i></i> Reading time ~4 minutes </p> </div> <h2 id="모바일-그림판-및-갤러리-웹-애플리케이션">모바일 그림판 및 갤러리 웹 애플리케이션</h2> <h2 id="바로가기"><a href="https://inkpad.giize.com/">바로가기</a></h2> <h2 id="1-프로젝트-개요">1. 프로젝트 개요</h2> <p>본 프로젝트는 웹 기반의 그림판 애플리케이션으로, 사용자가 그림을 그리고 이를 서버에 저장, 수정, 삭제할 수 있는 기능을 제공합니다. 또한, 저장된 그림들을 갤러리 형태로 목록을 보고, 특정 그림을 선택하여 크게 볼 수 있는 기능을 포함합니다. 모바일 친화적인 반응형 디자인과 함께 현대적인 UI/UX를 지향합니다.</p> <h2 id="2-주요-기능">2. 주요 기능</h2> <h3 id="21-그림판">2.1. 그림판</h3> <ul> <li><strong>드로잉 도구</strong>: 펜, 지우개 기본 도구 제공.</li> <li><strong>도구 옵션</strong>: 선 색상 변경 (컬러 피커), 선 굵기 조절 (슬라이더).</li> <li><strong>캔버스 액션</strong>: 실행 취소 (Undo), 다시 실행 (Redo), 캔버스 전체 지우기.</li> <li><strong>고해상도 지원</strong>: 내부 캔버스 해상도 1000x1000 픽셀로 설정하여 그림 품질 향상.</li> <li><strong>서버 연동</strong>: <ul> <li><strong>새 그림 저장</strong>: 그림 제목 입력 후 이미지(PNG)와 압축된 그림 데이터(gzipped JSON)를 서버에 <code>POST</code> 요청으로 저장. 성공 시 <code>mainUuid</code>를 클립보드에 복사하고 메시지로 ID 안내.</li> <li><strong>기존 그림 수정</strong>: 로드된 그림 수정 후 <code>PUT</code> 요청으로 서버에 업데이트.</li> <li><strong>그림 삭제</strong>: <code>DELETE</code> 요청으로 서버에서 현재 그림 삭제 후 갤러리 페이지로 이동.</li> <li><strong>ID로 불러오기</strong>: <code>mainUuid</code>를 직접 입력하여 특정 그림을 서버에서 불러와 편집.</li> <li><strong>URL 연동</strong>: URL 파라미터 (<code>?mainUuid=...</code>)를 통해 특정 그림을 로드하여 편집 가능. 저장/로드 시 URL 업데이트.</li> </ul> </li> <li><strong>로컬 파일 기능</strong>: <ul> <li>현재 그림을 로컬 PNG 이미지 파일로 저장.</li> <li>로컬의 <code>.json</code> 또는 <code>.drawing.gz</code> 파일을 불러와 그림판에 로드 (서버 연동 해제).</li> </ul> </li> <li><strong>사용자 경험</strong>: <ul> <li>터치 인터페이스 지원 및 모바일 반응형 디자인.</li> <li><code>user-scalable=no</code> 및 <code>overscroll-behavior: none</code> 등으로 모바일 드로잉 경험 최적화.</li> <li>키보드 단축키 지원 (Ctrl+Z, Ctrl+Y, Ctrl+S).</li> <li>상태 메시지 시스템 (성공, 오류, 정보 알림).</li> <li><code>localStorage</code>를 사용하여 사용자가 관리하는 그림 정보 (ID, 이름 등) 일부 저장.</li> </ul> </li> </ul> <h3 id="22-갤러리">2.2. 갤러리</h3> <ul> <li><strong>그림 목록 표시</strong>: 저장된 그림들을 카드 형태로 표시 (이미지, 제목, 생성 날짜).</li> <li><strong>무한 스크롤</strong>: 스크롤 시 다음 그림 목록을 10~12개씩 동적으로 로드.</li> <li><strong>초기 화면 채우기</strong>: PC 화면에서는 처음 로드 시 화면 높이를 채울 만큼의 그림을 미리 로드.</li> <li><strong>그림 보기 연동</strong>: 각 그림 카드를 클릭하면 <code>view.html</code>로 이동하여 해당 그림의 상세 정보(이미지 URL, 제목, 날짜)를 전달.</li> <li><strong>ID로 그림 열기</strong>: 헤더의 “ID로 불러오기” 버튼을 통해 <code>mainUuid</code>를 입력받아 <code>draw.html</code>에서 해당 그림을 바로 열 수 있도록 링크.</li> <li><strong>새 그림 작성 링크</strong>: “새 그림” 버튼을 통해 <code>draw.html</code>로 이동.</li> </ul> <h3 id="23-그림-상세-보기">2.3. 그림 상세 보기</h3> <ul> <li>갤러리에서 선택한 그림을 큰 이미지로 표시.</li> <li>그림 제목 및 생성 날짜 정보 제공.</li> <li><strong>URL 공유</strong>: “공유하기” 버튼 클릭 시 현재 페이지의 URL(이미지 경로에 <code>publicId</code> 사용, <code>mainUuid</code> 미노출)을 클립보드에 복사.</li> <li><code>constants.js</code>를 사용하여 이미지 기본 경로 관리.</li> </ul> <h3 id="24-서버">2.4. 서버</h3> <ul> <li><strong>API 제공</strong>: <ul> <li><code>POST /api/drawings</code>: 새 그림 저장 (이미지 + 압축된 JSON 데이터). <code>mainUuid</code> 및 <code>publicId</code> 생성.</li> <li><code>GET /api/drawings</code>: 그림 목록 조회 (페이지네이션 지원: <code>page</code>, <code>limit</code> 파라미터). 각 항목에 <code>publicId</code>, <code>yearMonth</code>, <code>displayName</code>, <code>imageUrl</code>, <code>createdAt</code> 포함.</li> <li><code>GET /api/drawings/:mainUuid/json</code>: 특정 그림의 JSON 데이터 조회.</li> <li><code>PUT /api/drawings/:mainUuid</code>: 기존 그림 업데이트.</li> <li><code>DELETE /api/drawings/:mainUuid</code>: 특정 그림 삭제.</li> </ul> </li> <li><strong>데이터 저장</strong>: <ul> <li>드로잉 데이터(메타데이터)는 <code>uploads/db.json</code> 파일에 LowDB를 사용하여 관리.</li> <li>실제 파일 저장 구조: <ul> <li>이미지: <code>uploads/images/YYYY.MM/publicId.png</code></li> <li>그림 데이터: <code>uploads/json/YYYY.MM/mainUuid.drawing.gz</code> (또는 <code>.json</code>)</li> </ul> </li> </ul> </li> <li><strong>정적 파일 서비스</strong>: 업로드된 이미지 및 <code>public</code> 폴더 내 정적 에셋(HTML, JS, CSS) 제공.</li> </ul> <h2 id="3-기술-스택">3. 기술 스택</h2> <ul> <li><strong>프론트엔드</strong>: <ul> <li>HTML5, CSS3, JavaScript (ES6+)</li> <li>Tailwind CSS (CDN 및 <code>custom-styles.css</code> 사용)</li> <li>Pako.js (데이터 압축/해제)</li> </ul> </li> <li><strong>백엔드</strong>: <ul> <li>Node.js</li> <li>Express.js</li> <li>LowDB (JSON 파일 기반 데이터베이스)</li> <li><code>fs-extra</code> (파일 시스템 작업)</li> <li><code>uuid</code> (고유 ID 생성)</li> </ul> </li> <li><strong>폰트</strong>: Google Fonts (Inter)</li> </ul> <h2 id="4-프로젝트-파일-구조-주요-파일">4. 프로젝트 파일 구조 (주요 파일)</h2> <div><pre><code>├── 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 데이터베이스 파일 (드로잉 메타데이터)
</code></pre></div> <h2 id="5-설정-및-실행-방법">5. 설정 및 실행 방법</h2> <ol> <li><strong>프로젝트 클론 및 의존성 설치</strong>: <div><pre><code>git clone &lt;repository-url&gt;
<span>cd</span> &lt;project-directory&gt;
npm install
</code></pre></div> </li> <li><strong>서버 실행</strong>:  <p>서버는 기본적으로 <code>http://localhost:3000</code> 에서 실행됩니다.</p> </li> <li><strong>애플리케이션 접속</strong>: <ul> <li>그림판: <code>http://localhost:3000/draw.html</code></li> <li>갤러리: <code>http://localhost:3000/gallery</code> (또는 <code>list.html</code> 직접 접근)</li> </ul> </li> </ol> <h2 id="6-주요-api-엔드포인트">6. 주요 API 엔드포인트</h2> <ul> <li><code>POST /api/drawings</code>: 새 그림 저장.</li> <li><code>GET /api/drawings</code>: 그림 목록 조회 (페이지네이션: <code>?page=1&amp;limit=10</code>).</li> <li><code>GET /api/drawings/:mainUuid/json</code>: 특정 그림 데이터(JSON) 조회.</li> <li><code>PUT /api/drawings/:mainUuid</code>: 기존 그림 업데이트.</li> <li><code>DELETE /api/drawings/:mainUuid</code>: 특정 그림 삭제.</li> <li>정적 이미지 제공: <code>/uploads/images/YYYY.MM/publicId.png</code></li> </ul> <h2 id="7-향후-개선-사항-선택적">7. 향후 개선 사항 (선택적)</h2> <ul> <li>그림판 기능 확장 (다양한 브러시, 도형, 텍스트 입력 등).</li> <li>서버 사이드 이미지 리사이징 및 썸네일 생성.</li> </ul>  </div></div>

lahuman

Daniel Lim

모바일 그림판 및 갤러리 웹 애플리케이션
바로가기
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. 향후 개선 사항 (선택적)
그림판 기능 확장 (다양한 브러시, 도형, 텍스트 입력 등).
서버 사이드 이미지 리사이징 및 썸네일 생성.

InkPad :: 웹 기반 그림판판

댓글