kimwontae

기획 배경: 반복되는 비효율의 개선

"블로그에 구글 드라이브 이미지를 넣는 과정이 너무 번거롭다."

이 프로젝트는 지극히 개인적인 불편함에서 시작되었습니다. 구글 드라이브에서 제공하는 '링크 복사' 기능은 이미지 파일 자체의 주소가 아닌, 뷰어 페이지의 주소를 제공합니다. 이를 웹사이트나 블로그의 <img> 태그에 사용하려면 파일 ID를 추출하여 직접 링크 형식으로 변환해야 하는 번거로움이 있었습니다. 특히 수십 장의 사진이나 스크린샷을 첨부해야 할 때, 이 단순 반복 작업은 포스팅 시간을 크게 잡아먹는 요인이 되었습니다.

주요 기능 및 해결책

이 웹 유틸리티는 복잡한 링크 변환 과정을 자동화하여 생산성을 높이는 데 초점을 맞추었습니다.

• 다중 링크 일괄 변환: Textarea를 활용하여 여러 줄의 공유 링크를 한 번에 입력받고 처리합니다.
• 다양한 포맷 지원: 단순 URL뿐만 아니라 HTML 태그, Markdown 문법 등 사용 목적에 맞는 포맷을 제공합니다.
• 태그 속성 커스터마이징: Alt 텍스트(자동 넘버링 포함), Width 설정, 정렬 옵션 등을 UI에서 손쉽게 설정할 수 있습니다.
• 작업 히스토리: Local Storage를 활용하여 브라우저를 닫아도 최근 변환 기록이 유지되도록 구현했습니다.

기술적 구현: 정규표현식 활용

구글 드라이브의 링크는 단축 URL, 전체 URL, 파라미터형 URL 등 다양한 패턴을 가지고 있습니다. 이를 안정적으로 처리하기 위해 정규표현식을 활용한 ID 추출 로직을 구현했습니다.

function extractId(url) {
    // 1. 일반적인 공유 링크 (/d/ID/) 패턴 매칭
    const match1 = url.match(/\/d\/([a-zA-Z0-9_-]+)/);
    
    // 2. 구형 ID 파라미터 (id=ID) 패턴 매칭
    const match2 = url.match(/id=([a-zA-Z0-9_-]+)/);

    if (match1) return match1[1];
    if (match2) return match2[1];
    
    // 매칭 실패 시 null 반환
    return null;
}

이 로직을 통해 사용자가 어떤 형태의 링크를 입력하더라도 핵심 파일 ID만을 정확하게 추출하여, 직링크(Direct Link) 형식인 lh3.googleusercontent.com 도메인으로 변환합니다.

성과 및 회고

이 작업을 통해 블로그 포스팅 시 이미지 링크 작업 시간을 기존 대비 80% 이상 단축할 수 있었습니다. 단순한 기능 구현을 넘어, '히스토리'나 '미리보기' 기능을 추가하며 사용자가 겪을 수 있는 실수(링크 유효성 확인 등)를 방지하는 UX를 설계하는 경험이 되었습니다. 또한 서버 없이 클라이언트 사이드 저장소(Local Storage)만으로 데이터 지속성(Persistence) 기능을 구현해보며 웹 스토리지의 활용 가능성을 확인했습니다.