프로젝트 시작 배경과 기획
요즘 온라인에 이미지를 올릴 때 저작권 보호와 브랜드 표시가 점점 중요해지고 있습니다. 단순히 이미지를 올리는 것만으로는 원본 이미지가 다른 곳에서 무단으로 사용될 위험이 있습니다. 그래서 개인 프로젝트로 웹 기반 워터마크 생성기를 만들어, 사용자가 손쉽게 이미지에 텍스트 워터마크를 추가하고 다운로드할 수 있는 도구를 기획했습니다.
초기에는 단순히 텍스트를 이미지 위에 표시하는 정도로만 생각했지만, 점차 사용자가 옵션을 조정하고 다양한 배치 방식을 선택할 수 있도록 기능을 확장하게 되었습니다. 반복 배치, 대각선 배치, 투명도 조절 등 다양한 요구사항을 충족시키면서도 간단하게 사용할 수 있는 UX를 만드는 것이 목표였습니다.
기술 스택 선택과 이유
개발에 앞서 기술 스택을 고민했습니다. HTML/CSS와 순수 JS만으로도 구현은 가능했지만, 유지보수성과 확장성을 고려해 React를 선택했습니다. React는 컴포넌트 기반 구조로 상태 관리가 용이하고, UI 업데이트가 간편하여 실시간 미리보기 기능 구현에 적합했습니다.
이미지 렌더링과 워터마크 적용에는 Canvas API를 활용했습니다. Canvas는 픽셀 단위로 이미지를 제어할 수 있어, 투명도, 회전, 반복 배치 등 세밀한 기능 구현에 유리합니다. 또한, React와 결합하면 상태 변화에 따른 캔버스 재렌더링을 간단히 처리할 수 있어 최종 UX가 훨씬 부드러워졌습니다.
추가적으로 React Router를 사용하여 SPA 구조를 만들고, Helmet을 활용해 SEO 최적화와 메타데이터 관리를 하기로 결정했습니다. 이로써 단순한 유틸리티 앱이 아니라, 블로그와 함께 운영할 때 검색 엔진에도 잘 노출될 수 있도록 고려했습니다.
개발 과정에서 직면한 고민과 문제 해결
개발 과정에서 여러 기술적 도전에 직면했습니다. 가장 먼저, 파일 업로드와 메모리 관리 문제였습니다. 사용자가 같은 이미지를 여러 번 선택하면 기존 URL 객체가 남아 메모리가 누수될 수 있었습니다. 이를 해결하기 위해 URL.revokeObjectURL을 적극 활용했고, 이미지 로딩 완료 시 객체를 해제하도록 구현했습니다.
다음으로, 멀티라인 텍스트 처리가 어려웠습니다. 워터마크가 여러 줄일 경우 캔버스에서 각 줄의 높이와 중심 위치를 계산해야 했습니다. 이를 위해 scrollHeight 기반의 자동 높이 조정 로직과, 줄 간격(lineHeight) 계산을 통해 텍스트 블록을 정중앙 또는 원하는 위치에 정확히 배치할 수 있었습니다.
또 하나의 도전은 반복 배치와 회전이었습니다. 가로, 세로, 대각선으로 텍스트를 반복 배치할 때 회전 각도와 캔버스 좌표를 정확히 계산하는 것이 복잡했습니다. 삼각함수를 이용해 회전 후 블록의 가로/세로 크기를 계산하고, 반복 간격(gap)과 조합하여 자연스러운 패턴을 만들 수 있었습니다.
주요 기능 구현 경험
워터마크 생성기에는 다음과 같은 기능을 구현했습니다.
- 실시간 미리보기: 입력과 옵션 변경 시 즉시 캔버스에 반영
- 폰트 크기, 색상, 투명도, 배치 옵션 조정 가능
- 단일/반복 배치: 단일 위치 또는 가로/세로/대각선 반복
- PNG 다운로드: 원본 이미지를 손상시키지 않고 워터마크 적용 이미지 저장
- 다크 모드 지원: 사용자 환경에 맞춘 UI 색상 전환
특히 반복 배치 기능은 가장 난이도가 높았지만, 루프와 좌표 계산을 최적화하여 대규모 이미지에서도 성능이 떨어지지 않도록 구현했습니다. 또한, 단일 배치 위치 옵션을 추가하여 사용자가 원하는 정확한 위치에 워터마크를 배치할 수 있게 했습니다.
UI/UX 설계와 고민
UI/UX 측면에서도 고민이 많았습니다. 사용자가 워터마크 문구를 입력하면 즉시 미리보기에서 변화를 확인할 수 있어야 했고, 모바일 환경에서도 편리하게 사용할 수 있어야 했습니다. 이를 위해 자동 높이 조정 텍스트 영역, 옵션 패널 정리, 버튼과 슬라이더 UI 개선 등을 반복적으로 테스트했습니다.
다크 모드 구현 또한 단순히 배경 색상만 바꾸는 것이 아니라, 모든 텍스트, 버튼, 슬라이더, 캔버스 UI 색상을 고려했습니다. 작은 디테일까지 신경 쓰면서 사용자 경험을 개선했습니다.
테스트와 성능 최적화
여러 이미지 형식과 크기를 테스트하면서, 특히 큰 이미지에서 캔버스 렌더링 성능 최적화가 필요했습니다. 이미지 로딩 후 한 번만 drawCanvas를 호출하도록 하고, 상태 변화에 따른 불필요한 재렌더링을 최소화했습니다.
또한 반복 배치가 많은 경우, 반복문 내에서 불필요한 Canvas 상태 저장/복원 호출을 줄여 렌더링 속도를 높였습니다. 이 과정을 통해 웹 브라우저에서 실시간으로 변화를 보여주는 UX가 안정적으로 작동하도록 만들었습니다.
개발하며 배운 점
이번 프로젝트를 통해 배운 점은 다양합니다. React의 상태 관리와 Canvas API 결합, 실시간 미리보기 구현, 사용자 친화적 UI 설계, 메모리 관리, 반복 배치 알고리즘 등 실무에서 필요한 여러 기술을 직접 경험했습니다. 또한, 작은 UI 요소까지 신경 쓰면서 개발자가 사용자를 배려하는 경험을 몸소 느낄 수 있었습니다.
향후 개선 및 확장 계획
현재 기능은 충분히 유용하지만, 앞으로 다음과 같은 개선과 확장을 고려하고 있습니다.
- 로고 워터마크 지원: 텍스트뿐만 아니라 이미지 로고 적용
- 반투명 패턴 효과 강화: 투명도와 색상 혼합으로 자연스러운 배치
- 모바일 환경 최적화: 터치 기반 이미지 이동, 확대/축소 기능
- 다양한 이미지 형식 지원 확대: WebP, HEIC 등
- 사용자 맞춤 설정 저장 기능: 자주 쓰는 옵션을 저장하고 불러오기
이를 통해 단순한 워터마크 생성기가 아니라, 다양한 상황에서 활용 가능한 이미지 편집 도구로 발전시키고자 합니다.
마무리
이번 워터마크 생성기 개발은 기술적 도전과 배움의 연속이었습니다. 단순히 기능 구현만이 목표가 아니라, 사용자가 실제로 편리하게 사용할 수 있는 도구를 만드는 경험을 쌓을 수 있었습니다.
앞으로도 프로젝트를 개선하고 기능을 추가하면서, 개인 프로젝트를 통해 성장하고 실무 능력을 키우는 발판으로 삼고 싶습니다. 이번 경험은 프론트엔드 개발 실력뿐 아니라 문제 해결 능력, UI/UX 설계 능력까지 확장할 수 있는 소중한 기회였습니다.