Changelog
AnnotateShot의 모든 진화 기록
- 🎨 디자인 시스템 전면 적용: Claude Design으로 구축한 디자인 시스템을 코드베이스에 적용했습니다. CSS 커스텀 프로퍼티(토큰)를 단일 소스로 정리하고, 승인된 커스텀 드롭다운 컴포넌트를 사이드바 전체 셀렉터에 반영했습니다.
- 🔽 커스텀 드롭다운 컴포넌트: 네이티브 OS 드롭다운을 디자인 시스템 스펙의 커스텀 드롭다운으로 교체했습니다. 스타일된 트리거 버튼, 열림 상태 애니메이션, 선택 항목 체크마크, 하단 위치 시 위로 열리는 flip-up 동작을 포함합니다.
- 🗂️ 레이어 아이콘 SVG 전환: 레이어 목록의 아이콘을 Material Icons 폰트 리거처에서 인라인 SVG로 교체해, 캡처 이미지에서도 아이콘이 정상 렌더링됩니다.
- 📝 영문 블로그 발행: 디자인 시스템 적용 과정에서 발생한 구현 간극과 Plan 모드의 필요성을 정리한 영문 블로그 글 을 추가했습니다.
- ✍️ 텍스트 모드 인라인 입력: 텍스트 모드에서 캔버스를 클릭하면 prompt 창 대신 클릭 지점에 입력창이 뜨고, 바로 타이핑해 주석을 추가할 수 있습니다.
- 🖊️ 기존 텍스트 더블클릭 편집: 텍스트 주석을 더블클릭하면 같은 위치에서 기존 내용을 다시 열어 수정할 수 있습니다.
- 🔤 텍스트 폰트 선택: 텍스트 주석에 Sans, Serif, Mono 폰트 옵션을 추가하고 저장/복사 이미지에도 선택한 폰트가 그대로 렌더링되도록 했습니다.
- ⌨️ 텍스트 입력 키 흐름 정리: Enter는 확정, Shift+Enter는 줄바꿈, Esc는 취소로 동작하며, 빈 입력은 주석을 만들지 않습니다.
- 🎯 캔버스 포커스 안정화: 실제 브라우저 QA에서 발견한 인라인 입력창 즉시 blur 문제를 수정해, 클릭 직후 편집창이 사라지지 않도록 했습니다.
- 📰 영문 블로그 타이포그래피 정리: 영문 제품 글은 Source Serif 기반 스타일로 정리해 본문 가독성을 개선했습니다.
- 🗂️ 블로그 정보 구조 정리: 메인 블로그는 AnnotateShot 제품 업데이트와 활용 글 중심으로 재정렬하고, 개인 다이어리와 제품 외 에세이는 Archive 로 분리했습니다.
- 🏷️ 블로그 태그 필터 추가: 우측 태그 목록에서 Text Annotation, Number Annotation, QA 같은 제품 태그를 클릭해 관련 글만 빠르게 볼 수 있도록 했습니다.
- 🧪 회귀 테스트와 편집 QA 보강: 텍스트 폰트 저장, 인라인 입력 확정/취소, 멀티라인 렌더링을 단위 테스트로 고정하고 브라우저에서 텍스트/숫자/도형 편집 흐름을 검증했습니다.
- 📝 영문 활용 글 발행: 텍스트 모드 개편을 제품 리뷰, 릴리즈 노트, 지원 문서에 어떻게 활용할 수 있는지 소개하는 영문 블로그 글 을 추가했습니다.
- 🔢 번호 설명 워크플로우 추가: 숫자 주석마다 설명을 입력하고, 이미지 안의 번호와 문서/이슈용 설명을 함께 관리할 수 있습니다.
- 🪟 번호 설명 모달 전환: 좌측 사이드바에는 요약과 편집 버튼만 남기고, 실제 설명 편집과 내보내기는 중앙 모달에서 처리하도록 정리했습니다.
- 📋 설명 복사 포맷 확장: 번호 설명을 Markdown 목록, Markdown 표, 일반 텍스트로 복사할 수 있어 GitHub Issue, 문서, 채팅 상황에 맞게 붙여넣을 수 있습니다.
- 🖼️ 이미지+설명표 산출물 추가: 주석 이미지 아래에 번호 설명표를 붙인 PNG를 저장하거나 클립보드로 복사할 수 있습니다.
- 🔔 복사/저장 완료 알림: Markdown/Table/Text 복사와 이미지+표 복사/저장 액션이 기존 우측 상단 알림 패턴을 사용해 완료 상태를 명확히 보여줍니다.
- 🧱 상태 브리지와 레이어 런타임 정리: #73 작업으로 레거시 전역 상태 노출과 레이어 재구성 흐름을 전용 모듈로 분리해 이후 기능 추가 시
main.js변경 범위를 줄였습니다. - 🧪 회귀 테스트 보강: 번호 설명 모달, 포맷별 복사, 이미지+설명표 합성/복사/저장, 상태 브리지, 레이어 런타임을 자동 테스트와 브라우저 QA로 검증했습니다.
- 📝 영문 활용 글 발행: 숫자 주석과 설명 내보내기 흐름을 제품 피드백, QA, 고객 지원 업무에서 어떻게 쓸 수 있는지 소개하는 영문 블로그 글 을 추가했습니다.
- 🧭 이미지+표 배치 후속 과제 등록: 이미지+설명표를 아래/우측/자동 배치로 선택하는 개선은 #85 이슈로 분리했습니다.
- 📐 이미지 리사이즈 패널 개선: 기존 드롭다운을 원본/결과 크기를 함께 보여주는 리사이즈 컨트롤로 확장했습니다.
- 🎚️ 사용자 정의 크기 입력: Auto, 너비 맞춤, 높이 맞춤, 화면 맞춤, 원본, 사용자 정의 모드를 제공하고, 사용자 정의에서는 슬라이더와 정확한 너비/높이 입력을 지원합니다.
- 🔒 비율 잠금과 주석 초기화 확인: 정확한 크기 입력은 기본적으로 원본 비율을 유지하며, 주석이 있는 상태에서 리사이즈를 적용하면 초기화 확인을 먼저 표시합니다. 취소하면 기존 캔버스와 주석이 보존됩니다.
- 🟦 도형 편집 검증 보강: 원/타원 도구,
Shift정원 유지, 선택 후 리사이즈 핸들 동작을 최신 코드 기준으로 재검증하고 README 설명을 현재 동작에 맞게 정리했습니다. - 📝 영문 신규 기능 소개 글 발행: 4.0.0 이후 추가된 기능을 실제 제품팀 use case 중심으로 소개하는 영문 블로그 글 을 추가했습니다.
- 🔎 사이트 전체 SEO 메타데이터 보강: 공개 HTML 페이지 전반에 description, canonical, Open Graph, Twitter Card를 적용하고, 블로그 글에는 BlogPosting 구조화 데이터를 추가했으며 sitemap/robots 설정을 확장했습니다.
- 📚 GSD 문서 점검 지침 추가: 릴리즈 게이트에서
README.md와 사용자-facing 문서의 기능 설명, 버전, 줄 수, 테스트 수를 함께 확인하도록 운영 지침을 보강했습니다.
- 🧭 최근 릴리즈 배지 자동 감지: 전역 내비게이션의
N배지가 더 이상 하드코딩 날짜에 의존하지 않고,changelog.html과blog/index.html의 최신 날짜를 직접 읽어 표시됩니다. - 📝 릴리즈 회고 블로그 발행: 도형 리사이즈, 모자이크 안정화, 릴리즈 게이트, 자동화 누락을 바탕으로 최근 릴리즈 경험을 정리한 블로그 글 을 추가했습니다.
- 🧹 릴리즈 운영 부채 제거: 릴리즈 때마다
nav-freshness.js의 날짜를 수동 갱신해야 하던 절차를 제거했습니다.
- 🟦 도형 크기 조절: 선택한 사각형과 원/타원 도형에 8방향 리사이즈 핸들을 표시해, 만든 뒤에도 크기를 조절할 수 있습니다.
- ⭕ 원 / 타원 그리기: 원 도구를 자유형 타원까지 그릴 수 있는
원 / 타원도구로 확장했습니다.Shift를 누른 채 드래그하면 정원을 유지합니다. - 🧩 모자이크 렌더링 안정화: 모자이크 채우기가 회색 fallback으로 보이는 경우를 줄이도록, 픽셀 직접 읽기 대신 오프스크린 캔버스 기반 픽셀레이션으로 처리 방식을 바꿨습니다.
- 💡 단축키 힌트 노출: 원/타원 선택 시
Shift: 정원 유지힌트를 표시해, 기존 디자인 도구 경험이 없는 사용자도 제약 동작을 발견할 수 있게 했습니다.
- 🧹 앱 자산 캐시 무효화 정리:
index.html에서 로드되는 앱 CSS/JS에 동일한 릴리즈 버전 쿼리를 적용해, 브라우저가 이전 스크립트와 새 스크립트를 섞어 로드하는 문제를 줄였습니다. - 🔁 다른 PC 배포 반영 안정화: 원격 저장소에서 동기화된 최신 코드가 기존 방문자의 브라우저 캐시에 막히지 않고 반영되도록 정적 자산 URL을
v4.3.3기준으로 정렬했습니다. - ✅ 릴리즈 게이트 보강: 버전 정렬, 정적 자산 DOM 검증, Jest 회귀 테스트, 릴리즈 QA/리뷰 기록을 추가했습니다.
- ⌨️ 크롭 모드 Enter 적용: 크롭 영역을 선택한 뒤 버튼을 누르지 않아도 Enter 키로 바로 적용할 수 있습니다.
- 🧩 입력 필드 보호: 고정 크롭 너비/높이 입력 중 Enter는 입력 필드 동작을 방해하지 않도록 처리했습니다.
- 🖱️ 도형 드래그 이탈 처리 개선: 도형을 그리다가 커서가 이미지 밖으로 나가도 즉시 저장하지 않고, 버튼을 누른 채 돌아와 놓을 때만 저장합니다. 밖에서 버튼을 놓으면 임시 도형은 취소됩니다.
- ↗️ 화살표 촉 렌더링 개선: 직선/곡선 화살표의 끝 촉을 선 굵기와 길이에 맞춰 더 자연스러운 비율로 렌더링합니다.
- ✅ 회귀 테스트 보강: 크롭 모드 Enter 적용, 입력 필드 예외, 선택 영역 없음 예외, 도형 드래그 이탈/복귀/취소 흐름, 화살표 촉 비율을 자동 테스트에 추가했습니다.
- 🖼️ 확장 프로그램 현재 화면 캡처 화질 보존: Chrome 확장 프로그램에서 전달한 PNG 캡처는 기본/원본 크기 모드에서 원본 픽셀 해상도를 유지하도록 웹앱 로딩 경로를 조정했습니다.
- 🧭 표시 크기와 저장 픽셀 분리: Retina/고해상도 캡처는 화면에는 CSS 크기로 맞춰 보여주되, 저장되는 캔버스 픽셀은 캡처 원본을 유지합니다.
- ✅ 회귀 테스트 보강: 확장 캡처 크기 계산과 캔버스 픽셀 보존 분기 테스트를 추가했습니다.
- 🔍 돋보기 주석 모드 추가: 원본 지점을 먼저 선택한 뒤 표시 위치를 드래그해 원형 또는 사각형 확대 영역을 만들 수 있습니다.
- 🎯 스팟라이트 주석 모드 추가: 중심점에서 드래그해 원형 또는 사각형 강조 영역을 만들고, 외부 배경을 어둡게 처리할 수 있습니다.
- 🎚️ 전용 조절값 지원: 돋보기 확대 배율, 원본 지점 표시, 연결선 표시와 스팟라이트 배경 어둡기를 스타일 패널에서 선택하고 설정에 저장합니다.
- 🧭 노이즈를 줄인 연결 방식: 돋보기 연결선은 기본 OFF이며, 켰을 때도 확대 영역 내부를 가로지르지 않고 원본 지점에서 결과 영역의 가장 가까운 테두리까지만 표시합니다.
- 🧩 기존 레이어 시스템 통합: 돋보기와 스팟라이트도 레이어 이름, 드래그 이동, undo, 저장/복원 흐름에 연결했습니다.
- ✅ 회귀 테스트 보강: 신규 주석 생성, UI 모드 표시, 캔버스 렌더러 디스패치 테스트를 추가했습니다.
- 🖱️ 커서 주석 모드 추가: 화살표, 클릭 포인터, 텍스트 선택, 그랩, 이동, 리사이즈, 금지 커서를 이미지 위에 레이어로 배치할 수 있습니다.
- 🧩 실제 에셋 기반 렌더링: 직접 그린 임시 SVG 대신 OS 스타일 커서 에셋을 번들에 포함해 캔버스와 미리보기에서 동일하게 렌더링합니다.
- 🎚️ 레이어별 크기와 이동 지원: 커서 주석도 숫자/이모지처럼 각 레이어의 크기와 종류를 독립적으로 저장하고, 배치 후 드래그로 이동할 수 있습니다.
- 🌐 다국어 UI 반영: 커서 모드, 커서 종류, 추가 완료 메시지, 크기 미리보기 문구를 한국어/영어/일본어 번역에 추가했습니다.
- ✅ 회귀 테스트 보강: 커서 주석 생성, UI 모드 표시, 캔버스 렌더러 디스패치를 자동 테스트에 추가했습니다.
- 🧹 프로덕션 콘솔 로그 최적화: 기본 사용 흐름에서 보이던 디버그성
console.log를 제거하고, 필요한 내부 상태 로그는 debug logger 뒤로 이동했습니다. - 🔍 디버그 모드 분리:
?debug=1또는localStorage.annotateshot_debug=1을 설정했을 때만 코어 앱 디버그 로그를 확인할 수 있습니다. - 🧩 오류 로그 보존: 이미지 로드 실패, 저장 실패, 권한/스토리지 문제처럼 실제 진단에 필요한
warn/error경로는 유지했습니다.
- 🎨 사용자 색상 선택 추가: 기존 기본 색상 드롭다운에 더해 네이티브 컬러 피커와 HEX 입력을 추가했습니다.
- 🧪 스포이드 도구 지원: 지원 브라우저에서는 화면에서 직접 색상을 추출해 번호, 도형, 텍스트 주석 색상으로 사용할 수 있습니다.
- 💾 사용자 색상 저장 연동: 직접 고른 색상도 기존 설정 저장/복원, 크기 미리보기, 캔버스 다시 그리기 흐름과 함께 동작합니다.
- 🔗 About 외부 링크 보강: Contact 섹션에 LinkedIn과 개인 블로그 링크를 추가했습니다.
- ✅ 컬러 도구 회귀 테스트 추가: HEX 정규화, 사용자 색상 option 동기화, 스포이드 지원 감지를 자동 테스트로 검증합니다.
- 🏗️ Phase 2 아키텍처 리팩토링 완료:
main.js에 남아 있던 상태, 렌더링, 입력, 히스토리, UI 이벤트 책임을 전용 모듈로 분리했습니다. - 📉 main.js 경량화: 기존 1,962줄 규모의 진입 파일을 1,000줄까지 줄이고, 초기화와 레거시 호환 브리지 중심으로 역할을 좁혔습니다.
- 🎚️ 도형 굵기 동작 수정: 새 도형의 굵기를 바꿔도 기존 도형의 굵기가 함께 바뀌던 문제를 수정해, 레이어별 선 굵기가 독립적으로 유지됩니다.
- 🧪 회귀 테스트 보강: annotation controller, canvas renderer, app state, navigation freshness 테스트를 추가해 Phase 2 변경 범위를 자동 검증하도록 했습니다.
- 🧭 최근 콘텐츠 배지 추가: Blog와 Changelog에 최근 7일 이내 새 글이나 릴리스가 있을 때 전역 내비게이션에
N배지를 표시합니다. - 📝 기술 회고 공개: Phase 2 리팩토링 과정과 문제 해결 내용을 블로그 글 로 정리했습니다.
- 🎚️ 주석 크기 슬라이더 추가: 좌측 스타일 패널의 크기 선택을 드롭다운에서 1px 단위 슬라이더로 변경했습니다.
- 👀 모드별 크기 프리뷰 제공: 숫자, 텍스트, 이모지 모드에 맞춰 현재 선택한 크기가 어떻게 보일지 패널에서 미리 확인할 수 있습니다.
- 🌐 다국어 표시 개선: 크기 프리뷰 라벨과 일본어 UI 번역을 보강하고, 번역 리소스 캐시로 인해 이전 문구가 남는 문제를 줄였습니다.
- 🖼️ 빈 캔버스 안내문 안정화: 이미지가 없는 상태에서 크기 슬라이더나 언어를 바꿔도 기본 안내문이 사라지지 않도록 수정했습니다.
- 📝 제품 사양 문서 정리: private/Vercel 운영 기준과 AnnotateShot 기능 사양을 docs 문서로 분리해 관리 기준을 명확히 했습니다.
- ↗️ 곡선 화살표 추가: 도형 모드에서 '곡선 화살표'를 선택할 수 있습니다. 드래그로 시작/끝을 지정한 뒤 컨트롤 핸들(●)을 드래그해 곡률을 자유롭게 조정할 수 있습니다.
- 🏷️ 직선/곡선 화살표 구분: 기존 화살표는 '직선 화살표'로 이름이 변경되었습니다.
- 🧩 코드 모듈화: 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(가로) 키를 이용한 정렬 클릭 기능을 추가했습니다.
- ➡️ 화살표 기능: 이미지에 화살표 주석을 추가할 수 있습니다.
- 🚀 최초 출시: 로컬 이미지/클립보드 불러오기 및 숫자 주석 기능.
- 💾 이미지 저장: 작업 완료된 이미지 로컬 저장 지원.