손으로 그린 이미지를 선택하여 다양한 생생한 색상으로 색칠할 수 있는 간단한 인터랙티브 색칠 앱을 만드세요.

첫 번째 화면
1. 썸네일 표시: 탐색을 쉽게 하기 위해 제공된 이미지의 썸네일을 보여줍니다:
   - 이미지 1: [동물원 동물](https://img.freepik.com/free-vector/hand-drawn-zoo-animals-illustration_23-2151199715.jpg)
   - 이미지 2: [두 번째 동물원 동물](https://img.freepik.com/free-vector/hand-drawn-zoo-animals-illustration_23-2151199718.jpg)
   - 이미지 3: [사자와 기린](https://img.freepik.com/premium-vector/lion-giraffe-hand-drawn_185029-508.jpg)
   - 이미지 4: [부엉이 윤곽선](https://img.freepik.com/free-vector/hand-drawn-owl-outline-illustration_23-2149277379.jpg)
   - 이미지 5: [여우 윤곽선](https://img.freepik.com/free-vector/hand-drawn-fox-outline-illustration_23-2149272718.jpg)
   - 이미지 6: [사자 윤곽선](https://img.freepik.com/free-vector/hand-drawn-lion-outline-illustration_23-2149285355.jpg)
   - 이미지 7: [펭귄 윤곽선](https://img.freepik.com/free-vector/hand-drawn-penguin-outline-illustration_23-2150582038.jpg)
   - 이미지 8: [기린 낙서](https://img.freepik.com/free-vector/animal-doodle-outline-cute-giraffe_1308-81895.jpg)

썸네일은 작지만 클릭할 수 있어 색칠 화면으로 원활하게 이동할 수 있어야 합니다.

이미지 선택 후
2. 이미지 표시: 선택한 이미지를 전체 화면에 세로 중앙에 표시합니다.

3. 기능 버튼:
   - 뒤로 가기 버튼 (좌측 상단): '정말 돌아가시겠습니까? 저장되지 않은 변경 사항은 모두 사라집니다.'라는 확인 대화상자를 표시한 후 썸네일 화면으로 돌아갑니다.
   - 저장 버튼 (좌측 상단): 현재 색칠한 이미지를 PNG 파일로 저장합니다.
   - 색상 팔레트 (우측 상단): 현재 색상을 나타내는 큰 빨간 원을 표시하며, 클릭 시 24가지 밝은 색상이 있는 전체 화면 팔레트를 엽니다.

색칠 상호작용
4. 영역 채우기: 사용자가 이미지의 경계를 감지하여 선택한 색상으로 해당 영역을 채울 수 있도록 합니다. 정의된 경계 내에서 터치하거나 클릭하면 해당 영역이 현재 선택된 색상으로 채워집니다.

색상 선택은 풍부한 색감과 직관적인 상호작용을 제공하여 창의성을 북돋아야 합니다.

Create a simple interactive coloring application:
First screen:
- Display thumbnails of the provided images:
  1. https://img.freepik.com/free-vector/hand-drawn-zoo-animals-illustration_23-2151199715.jpg
  2. https://img.freepik.com/free-vector/hand-drawn-zoo-animals-illustration_23-2151199718.jpg
  3. https://img.freepik.com/premium-vector/lion-giraffe-hand-drawn_185029-508.jpg
  4. https://img.freepik.com/free-vector/hand-drawn-owl-outline-illustration_23-2149277379.jpg
  5. https://img.freepik.com/free-vector/hand-drawn-fox-outline-illustration_23-2149272718.jpg
  6. https://img.freepik.com/free-vector/hand-drawn-lion-outline-illustration_23-2149285355.jpg
  7. https://img.freepik.com/free-vector/hand-drawn-penguin-outline-illustration_23-2150582038.jpg
  8. https://img.freepik.com/free-vector/animal-doodle-outline-cute-giraffe_1308-81895.jpg

- Thumbnails should be small and easy to navigate.

After selecting an image:
- Display the chosen image full-screen vertically.
- Top-left corner:
  - "Back" button: returns to image selection after confirmation dialog.
  - "Save" button: downloads the colored image.
- Top-right corner:
  - Large red circle indicating the current selected color (default is bright blue).
  - On clicking the circle, display a fullscreen palette with 24 vibrant color options arranged as small circles. After selecting a color, close the palette.

Coloring interaction:
- Detect boundaries of image areas.
- On click/tap within boundaries, fill the area with the selected color.

Q: What should the confirmation dialog say when returning to image selection?
A: Are you sure you want to go back? Any unsaved changes will be lost.

Q: What should happen when the 'Save' button is clicked?
A: Just save it in PNG format.