Changelog
AnnotateShot의 모든 진화 기록
- ↗️ 곡선 화살표 추가: 도형 모드에서 '곡선 화살표'를 선택할 수 있습니다. 드래그로 시작/끝을 지정한 뒤 컨트롤 핸들(●)을 드래그해 곡률을 자유롭게 조정할 수 있습니다.
- 🏷️ 직선/곡선 화살표 구분: 기존 화살표는 '직선 화살표'로 이름이 변경되었습니다.
- 🧩 코드 모듈화: 3,494줄이었던 main.js를 2,832줄로 줄였습니다. 곡선 화살표·크롭·이미지·설정 로직이 별도 모듈 파일로 분리되었습니다.
- ☕ 개발 노트: AI 비서 '프라이데이'와 대화만으로 구현한 여섯 번째 업데이트입니다.
- ✂️ 고정 크기 크롭 추가: 자르기 모드에서 W × H를 입력하면 지정한 픽셀 크기의 크롭 박스가 캔버스에 즉시 표시됩니다. 박스를 드래그해 위치를 자유롭게 조정할 수 있습니다.
- 📐 크롭 출력 정확도 개선: 이미지 리사이즈 상태에서도 지정한 픽셀 크기로 정확하게 잘려서 저장 및 클립보드 복사가 됩니다.
- 🖐️ 크롭 박스 커서 개선: 고정 크롭 박스 위에서 손 모양(grab), 드래그 중 잡기(grabbing) 커서로 직관적인 인터페이스를 제공합니다.
- 🟫 모자이크 테두리 없음 옵션: 도형 채우기를 모자이크로 설정할 때 테두리를 숨길 수 있는 체크박스가 추가되었습니다.
- 🐛 원본 크기 배율 깨짐 수정: 이미지 크기를 '원본'으로 선택했을 때 뷰포트보다 넓은 이미지에서 가로세로 비율이 깨지던 문제를 수정했습니다.
- 👨👩👧👦 호칭계산기 출시 (Family Service): 두 사람의 관계를 입력하면 한국 가족 호칭을 자동으로 계산해주는 서비스가 새롭게 추가되었습니다. 바로가기 →
- ☕ 개발 노트: AI 비서 '프라이데이'와 대화만으로 구현한 다섯 번째 업데이트입니다.
- 🧭 Fill 모드 위치 조정 완성: Fit/Fill 전환 시, Fill의 한계점이던 좌우 여백 영역을 이미지 드래그로 재배치할 수 있도록 개선했습니다.
- 🎯 Adjust → Done 워크플로우: Fill 상태에서 Adjust로 위치를 미세 조정한 뒤 Done으로 고정하는 흐름을 추가했습니다.
- 🧱 경계 가이드 제공: Adjust 모드에서 이동 가능 범위를 직관적으로 알 수 있도록 가이드 라인을 표시합니다.
- 🐛 모바일 undo 복원 오류 수정: undo 시 이미지가 전체로 늘어나며 비율이 깨지던 문제를 해결했습니다.
- 🧭 모바일 렌더링 일관성 개선: 모바일 전용 렌더링 경로를 유지하여 주석/이미지 복원이 안정적으로 동작합니다.
- 🖼️ 가로 이미지 맞춤 옵션 추가: 가로 사진에서 Fit/Fill 토글을 제공하고, 토글 시 주석이 초기화되도록 했습니다.
- 🎯 Fit 모드 중앙 정렬: 가로 사진 Fit 모드에서 이미지가 화면 중앙에 정확히 배치되도록 수정했습니다.
- 🧹 모바일 가이드 자동 숨김: 이미지 로드 시 모바일 사용법 안내가 즉시 사라지도록 개선했습니다.
- 🛡️ 워터마크 모드 추가: 문서 보안 및 무단 도용 방지를 위한 '워터마크 모드'가 새롭게 추가되었습니다.
- 📐 지능형 사선 패턴: 텍스트를 입력하면 캔버스 전체에 -30도 각도의 사선 반복 패턴이 자동으로 생성됩니다.
- 🎚️ 실시간 투명도 조절: 슬라이더를 통해 워터마크의 농도를 5%에서 80%까지 실시간으로 조절하며 미리볼 수 있습니다.
- 📅 날짜 자동 포함: 현재 날짜와 시간(연월일시분)을 워터마크에 자동으로 포함하거나 제외할 수 있는 옵션을 제공합니다.
- 🖱️ 동적 마우스 커서: 선택한 모드(숫자, 도형, 텍스트, 워터마크)에 따라 마우스 커서가 직관적으로 변하도록 개선되었습니다.
- 🌍 다국어 지원: 한국어, 영어, 일본어 환경에서 워터마크 관련 모든 UI가 완벽하게 번역되어 제공됩니다.
- ☕ 개발 노트: AI 비서 '프라이데이'와 함께 IDE 없이 대화만으로 구현한 첫 번째 메이저 업데이트입니다.
- 👆 드롭다운 커서 문제 수정: 이미지 크기 드롭다운의 클릭 가능 영역을 확장하고 hover 시 커서가 정상적으로 표시되도록 수정했습니다.
- 🖱️ Label 클릭 지원: 드롭다운 label의 pointer-events 제한을 제거하여 label 영역에서도 드롭다운이 열리도록 개선했습니다.
- 🔒 Message 영역 클릭 차단 해제: #message div의 pointer-events를 조정하여 숨겨진 상태에서는 드롭다운 클릭을 방해하지 않도록 수정했습니다.
- 📏 레이어 사이드바 토글 기능: 우측 레이어 사이드바를 접었다 펼 수 있는 토글 버튼을 추가했습니다.
- 💾 기본 상태 최적화: 레이어 사이드바가 기본적으로 접힌 상태(50px)로 설정되어 더 넓은 캔버스 공간을 제공합니다.
- 🎨 부드러운 애니메이션: 사이드바 토글 시 0.3초 전환 효과와 아이콘 회전 애니메이션이 적용됩니다.
- 🔄 자동 캔버스 조정: 사이드바를 토글할 때 사용 가능한 공간에 맞춰 캔버스 크기가 자동으로 재계산됩니다.
- 🖼️ Chrome 확장프로그램 캡처 개선: DevTools Protocol 기반 전체 페이지 캡처로 전환하여 속도와 안정성이 향상되었습니다.
- 📐 뷰포트 스크롤 수정: 이미지 로드 시 항상 최상단부터 표시되도록 스크롤 위치 초기화를 강화했습니다.
- 🐛 크기 계산 정확도 향상: contentSize와 fullDocumentSize 중 큰 값을 사용하여 Fixed/Sticky 요소를 포함한 정확한 캡처가 가능해졌습니다.
- 🚀 대규모 코드 리팩토링 완료: 모놀리식 코드를 모듈 기반 아키텍처로 전면 개편했습니다.
- 📦 모듈화: 3,500줄의 main.js를 13개의 논리적 모듈로 분리하여 유지보수성을 대폭 향상시켰습니다.
- ⚡ 성능 개선: 코드 구조 최적화 및 불필요한 중복 제거로 전반적인 성능이 향상되었습니다.
- 🌍 번역 시스템 개선: JSON 기반 번역 데이터로 전환하여 다국어 관리가 용이해졌습니다.
- 🛠️ 유틸리티 함수 추출: 재사용 가능한 유틸리티 함수들을 별도 모듈로 분리했습니다.
- 🎨 CSS 분리: 1,400줄 이상의 임베디드 CSS를 외부 파일로 분리하여 구조를 개선했습니다.
- 🔧 Extension Bridge 모듈화: Chrome 확장프로그램 통합 코드를 독립 모듈로 분리했습니다.
- 🐛 언어 전환 버그 수정: 언어 변경 시 즉시 적용되지 않던 문제를 해결했습니다.
- 📊 코드 감소: 총 2,673줄의 코드를 정리하여 가독성과 유지보수성을 크게 향상시켰습니다.
- 🚫 광고 제거: Google AdSense 광고를 제거하여 사용자 경험을 개선했습니다.
- 🧹 불필요한 파일 정리: 테스트 파일 및 임시 파일들을 제거하여 프로젝트 구조를 최적화했습니다.
- ☕ 개발 노트: 오후 반차를 써서 집중적으로 리팩토링 작업을 진행했습니다.
- 🎌 일본어 지원 추가: 언어 선택기에 일본어(日本語)가 추가되어 3개 언어를 지원합니다.
- 📋 클립보드 복사 알림 개선: 클립보드 복사 버튼 클릭 시 성공/실패 메시지가 화면에 표시되어 작업 완료를 명확히 확인할 수 있습니다.
- 🗜️ PDF 압축 서비스 추가: 다른 서비스 선택기에 PDF 압축 기능이 추가되어 더 다양한 도구를 이용할 수 있습니다.
- 🎨 UI 레이아웃 조정: 사이드바 하단 영역의 구성 요소 배치를 개선하여 더 나은 사용자 경험을 제공합니다.
- 🖼️ 로고 업데이트: AnnotateShot 로고가 Chrome 확장프로그램과 동일한 아이콘으로 통일되었습니다.
- 🔧 이미지 크기 조정 개선: 자동 리사이즈가 기본값으로 설정되어 이미지 로드 시 화면에 최적화된 크기로 자동 조정됩니다.
- 📏 긴 이미지 가독성 향상: 높이 2000px 이상인 긴 스크린샷에서 너비를 1024px로 제한하여 가독성을 개선했습니다.
- 📍 이미지 표시 위치 수정: 이미지 로드 시 항상 상단부터 표시되도록 스크롤 위치와 레이아웃을 개선했습니다.
- 🚀 성능 최적화: 불필요한 디버깅 로그를 제거하여 이미지 로드 속도를 향상시켰습니다.
- 🗑️ UI 정리: 작동하지 않는 레거시 버전 링크를 제거하여 사용자 혼란을 방지했습니다.
- 📂 자동 파일명 생성: 이미지 저장 시 시간 기반 고유 파일명(annotateshot_YYYY-MM-DD_HH-mm-ss.png)이 자동으로 생성됩니다.
- ⚡ 사용자 경험 개선: 파일명 입력 대화상자가 제거되어 더 빠르고 편리한 저장이 가능합니다.
- 🔒 파일명 중복 방지: 시간 기반 파일명으로 덮어쓰기 위험을 완전히 제거했습니다.
- 📱 모바일 UI/UX 완전 개편: User Agent 기반 모바일 감지로 터치 최적화된 인스타그램 스타일 전체화면 UI를 제공합니다.
- 🎯 터치 기반 주석 시스템: 숫자, 이모지, 텍스트 모드 모두 터치 조작에 최적화되었습니다.
- 😀 이모지 선택 레이어 UI: 하단 이모지 버튼 클릭 시 슬라이드업 애니메이션으로 12가지 이모지를 선택할 수 있습니다.
- 🫱 드래그 앤 드롭 시스템: 모든 주석(숫자, 이모지, 텍스트)을 터치로 드래그하여 위치 이동이 가능합니다.
- 📐 크기 일관성 개선: 이모지와 숫자 모드 간 시각적 크기가 완전히 통일되었습니다.
- 🎨 자동 색상 대비: 배경 색상의 밝기를 분석하여 텍스트 색상을 자동으로 조정해 가독성을 향상시켰습니다.
- 📷 갤러리/카메라 선택: iOS와 Android 모두에서 갤러리 또는 카메라를 선택하여 이미지를 불러올 수 있습니다.
- 💾 모바일 저장 기능: Web Share API를 활용한 모바일 최적화 저장 기능이 추가되었습니다.
- 🎛️ 플로팅 액션 버튼: 이미지 업로드, 저장, 되돌리기, 설정 기능이 우측 플로팅 버튼으로 제공됩니다.
- 🏷️ 모바일 전용 브랜딩: Chrome 확장프로그램과 동일한 아이콘으로 브랜딩 통일성을 확보했습니다.
- 📖 모바일 사용법 안내: 터치 조작에 맞춘 전용 사용법 안내가 기본 캔버스에 표시됩니다.
- 🧹 Production 준비: 디버그 기능 제거 및 코드 최적화로 배포 준비가 완료되었습니다.
- 🔗 Chrome 확장프로그램 링크 추가: 상단 메뉴에서 Chrome Web Store의 AnnotateShot 확장프로그램으로 바로 이동할 수 있습니다.
- 📐 UI 개선: 상단 메뉴 텍스트 최적화로 모바일 환경에서의 가독성이 향상되었습니다.
- 🖥️ 반응형 개선: 모바일에서 확장프로그램 링크가 아이콘으로만 표시되어 공간을 절약합니다.
- 🎨 포토샵 스타일 캔버스 시스템 구현: 싱글 이미지 모드와 멀티 이미지 모드로 구분된 캔버스 시스템이 추가되었습니다.
- 🖼️ 싱글 이미지 모드 (기본): 기존 동작 유지 - 업로드된 이미지에 맞춰 캔버스가 자동 리사이즈됩니다.
- 🎯 멀티 이미지 모드: 고정 캔버스 크기, 배경색 선택, 여러 이미지를 레이어로 관리할 수 있습니다.
- 📐 8핸들 리사이즈 시스템: 이미지 모서리와 중점에 리사이즈 핸들이 표시되며, Shift+드래그로 비율을 유지할 수 있습니다.
- 🔄 캔버스 모드 전환 UI: 상단에서 싱글/멀티 모드를 쉽게 전환할 수 있습니다.
- 🌫️ 투명 배경 시각화 개선: 60px 체크무늬 패턴으로 투명 영역을 더 명확하게 표시합니다.
- ⚙️ 캔버스 크기 프리셋: 1920×1080, 1280×720 등 일반적인 크기 프리셋과 커스텀 크기 입력을 지원합니다.
- 🎨 배경색 선택기: 멀티 모드에서 캔버스 배경색을 자유롭게 선택할 수 있습니다.
- 🔧 초기화 및 모드 전환 안정성 개선: 모드 전환 시 설정값이 올바르게 초기화되고 기본 화면이 정상 표시됩니다.
- 🎨 포토샵 스타일 레이어 시스템 추가: 우측 사이드바에 레이어 관리 패널이 추가되었습니다.
- 👁️ 레이어 가시성 제어: 각 레이어별로 숨기기/보이기 기능을 지원합니다.
- 🗑️ 개별 레이어 삭제: 특정 레이어만 선택하여 삭제할 수 있습니다.
- 📋 실시간 레이어 목록: 주석 추가 시 자동으로 레이어 목록에 반영됩니다.
- 🖼️ 배경 이미지 레이어화: 업로드된 배경 이미지도 레이어로 관리됩니다.
- 📐 캔버스 크기 자동 조정: 양쪽 사이드바를 고려한 최적 캔버스 크기 계산이 개선되었습니다.
- 🔄 레이어 동기화: 기존 clicks 배열과 새로운 layers 시스템 간 완벽한 동기화를 지원합니다.
- 🧪 자동화 테스트 강화: 크롭 undo 기능에 대한 테스트 케이스가 추가되었습니다.
- 📏 크롭 모드 추가: 이미지의 특정 영역을 선택하여 크롭할 수 있는 기능이 추가되었습니다.
- 🎨 크롭 스타일 옵션: 기본 크롭과 찢어진 종이 효과를 선택할 수 있습니다.
- 👁️ 실시간 크롭 미리보기: 드래그하여 영역 선택 후 스타일 적용 전 미리 확인할 수 있습니다.
- ↩️ 크롭 실행 취소: 이전 이미지 상태 및 리사이즈 설정을 완전 복원할 수 있습니다.
- ⚙️ 설정 유지: 크롭 스타일 설정이 저장되어 재접속 시에도 유지됩니다.
- 🛠️ 스타일 컨트롤 최적화: 모드별 스타일 컨트롤 표시 오류를 수정했습니다.
- 🔍 UI 개선: 도형 모드에서 불필요한 '크기' 옵션을 숨겼습니다.
- 🐛 도형 모자이크 오류 수정: 드래그 방향에 따른 모자이크 위치 오류를 해결했습니다.
- 🎨 UI/UX 디자인 리뉴얼: 모던하고 직관적인 인터페이스로 전면 개편했습니다.
- 📱 반응형 디자인 강화: 모바일과 태블릿에서의 사용성을 크게 개선했습니다.
- 🔧 레이아웃 리팩토링: undo 버튼 위치 최적화 및 UI 요소를 정리했습니다.
- 🌐 다국어 지원 강화: 이모지 선택기 언어 중립화 및 UI 개선.
- 🎨 도형 채우기 옵션: 원과 사각형에서 테두리만, 단색, 흐림, 모자이크 중 선택 가능합니다.
- ⌨️ 한글 자판 지원: 좌표 고정 단축키(ㅗ, ㅍ)를 한글 환경에서도 지원합니다.
- 😀 이모지 모드 추가: 12가지 주요 이모지를 이미지에 추가할 수 있습니다.
- 📏 정밀 크기 조정: 숫자, 텍스트, 이모지 크기를 5px 단위로 조정 가능합니다.
- 🎯 원 그리기 개선: 지름 기준의 직관적인 원 그리기 방식을 도입했습니다.
- 📖 가이드 대체: 기본 이미지를 사용법 가이드로 대체하고 안내 메시지를 강화했습니다.
- 📱 모바일 터치 개선: 모바일 환경에서의 클릭 위치 정확도 및 응답성을 개선했습니다.
- 🫱 드래그 이동: 입력된 숫자, 도형, 텍스트를 마우스로 끌어서 위치 이동이 가능합니다.
- Tt 텍스트 모드 추가: 원하는 위치에 텍스트 주석을 입력할 수 있습니다.
- 📍 좌표 고정 클릭: V(세로), H(가로) 키를 이용한 정렬 클릭 기능을 추가했습니다.
- ➡️ 화살표 기능: 이미지에 화살표 주석을 추가할 수 있습니다.
- 🚀 최초 출시: 로컬 이미지/클립보드 불러오기 및 숫자 주석 기능.
- 💾 이미지 저장: 작업 완료된 이미지 로컬 저장 지원.