입력부터 복사까지 한 번에

여러 공유 링크를 입력하고 필요한 코드 형식을 선택한 뒤 결과를 바로 복사하는 흐름으로 구성했습니다.

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

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

Google Drive 공유 링크는 /d/ID/ 경로형과 id=ID 파라미터형 등 여러 형식으로 제공됩니다. 지원하는 패턴에서 파일 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는 lh3.googleusercontent.com 형식의 이미지 주소로 조합합니다. 원본 파일의 공유 권한이 공개되어 있어야 외부 페이지에서도 이미지가 표시됩니다.

사용 결과와 한계

링크마다 파일 ID를 찾아 코드를 작성하던 작업을 여러 건의 일괄 변환으로 바꾸었다. 미리보기로 결과와 공유 권한 문제를 확인하고, 최근 기록은 LocalStorage에 보관하도록 구성했다. 서버 없이 브라우저 안에서 입력·변환·기록 확인이 끝나는 단일 목적 도구다.