Drawing App 🎨

Drawing App은 웹 브라우저에서 동작하는 직관적이고 다양한 기능을 갖춘 드로잉 애플리케이션입니다.

주요 기능 ✨

기본 드로잉 기능

✍️ 자유 드로잉
🎨 다양한 색상 선택
📏 선 두께 조절 (1-10px)
✋ DrawFill 모드 (채우면서 그리기)
📮 전체 화면 채우기

텍스트 및 이미지

👆 텍스트 삽입
🖼️ 배경 이미지 검색 및 적용 (Unsplash API 활용)
✚ 로컬 이미지 배경 적용

편집 도구

✊ 전체 지우기
❌ 지우개 기능
📲 작업 결과 이미지 저장

기술 스택 🛠

HTML5 Canvas
Vanilla JavaScript
CSS3
Unsplash API

사용 방법 📝

시작 페이지에서 "Let's Start Drawing!" 버튼 클릭
상단의 색상 팔레트에서 원하는 색상 선택
선 두께 조절 슬라이더로 원하는 굵기 설정
다양한 그리기 모드 선택:
- Draw: 기본 그리기 모드
- DrawFill: 채우면서 그리기 모드
- FillScreen: 전체 화면 채우기
추가 기능:
- 텍스트 입력 후 TextFill 버튼으로 삽입
- 배경 이미지 검색 및 적용
- 로컬 이미지 업로드
- 작업 결과 저장

시스템 아키텍처

graph TB
    subgraph "Frontend Architecture"
        A[HTML Canvas] -->|Drawing Context| B[Canvas API]
        C[Event Handlers] -->|User Interactions| B
        D[State Management] -->|Updates| B
        E[UI Components] -->|Controls| C
    end

    subgraph "Core Features"
        B --> F[Drawing Tools]
        B --> G[Image Processing]
        B --> H[State History]
        
        F --> F1[Free Drawing]
        F --> F2[Fill Mode]
        F --> F3[Text Mode]
        
        G --> G1[Local Images]
        G --> G2[Unsplash API]
        
        H --> H1[Undo Stack]
        H --> H2[State Saving]
    end

    subgraph "External Services"
        G2 --> I[Image Search]
        I --> J[Image Grid]
    end

Loading

sequenceDiagram
    participant User
    participant Canvas
    participant EventHandler
    participant StateManager
    participant UnsplashAPI

    User->>Canvas: Draw/Click
    Canvas->>EventHandler: Trigger Event
    EventHandler->>StateManager: Update State
    StateManager->>Canvas: Render Update
    
    alt Image Search
        User->>EventHandler: Search Request
        EventHandler->>UnsplashAPI: API Call
        UnsplashAPI-->>StateManager: Return Images
        StateManager->>Canvas: Render Background
    end

Loading

graph TB
    subgraph "Component Structure"
        A[Main Container]
        B[Canvas]
        C[Tools Panel]
        D[Search Modal]
        
        A --> B
        A --> C
        A --> D
        
        C --> E[Color Options]
        C --> F[Drawing Tools]
        C --> G[Action Buttons]
        
        E --> E1[Color Picker]
        E --> E2[Preset Colors]
        
        F --> F1[Line Width]
        F --> F2[Draw Modes]
        F --> F3[Text Tool]
        
        G --> G1[Save]
        G --> G2[Clear]
        G --> G3[Undo]
        
        D --> D1[Search Input]
        D --> D2[Results Grid]
    end

Loading

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!