노션/티스토리에 구글 드라이브 이미지 오류 없이 바로 넣는 방법 (다중 일괄 변환)
블로그 포스팅 효율을 높이기 위해 개발한 웹 유틸리티입니다.
구글 드라이브의 공유 링크를 웹사이트 게시용 태그(HTML, Markdown)로 즉시 변환합니다.
피땀 흘려 만든 내 작업물, 업로드 하다가 지치신 적 없나요?
건축 설계나 디자인 프로젝트가 하나 끝나면, 도면, 다이어그램, 렌더링, 패널 등 수십 장의 이미지가 쏟아져 나옵니다. 이걸 개인 웹사이트나 티스토리, 노션 포트폴리오에 정리하려고 구글 드라이브에 올려두었는데... 막상 링크를 복사해서 붙여넣으면 이미지가 엑스박스(X)로 깨지는 경험, 다들 한 번쯤 있으실 겁니다.
구글 드라이브에서 제공하는 '링크 복사'는 이미지 파일 원본의 주소가 아니라 '뷰어(Viewer) 페이지'의 주소이기 때문입니다.
기존의 작업 방식
이걸 웹에 이미지로 띄우려면,
- 구글 드라이브 공유 링크를 복사한다.
- 링크 중간에 있는 알 수 없는 복잡한 ID 문자열만 마우스로 조심스레 드래그해서 복사한다.
- https://lh3.googleusercontent.com/d/ 뒤에 그 ID를 붙여넣는다.
- 이걸 이미지 30장이면 30번 반복한다... (이러다 밤샙니다 🫠)
반복적이고 소모적인 이 과정이 너무 답답해서, 직접 문제를 해결할 수 있는 웹 유틸리티를 만들었습니다.
구글 드라이브 이미지 직링크 일괄 변환기
제가 직접 기획하고 개발한 **[Google Drive Link Converter]**를 소개합니다. 별도의 설치나 가입 없이 웹에서 바로 사용할 수 있는 무료 툴입니다.
👉 [변환기 바로가기 링크 (https://wontae.kr/projects/projects-transfer-demo.html)]
디자인 실무자를 위한 핵심 기능
1. 수십 장의 링크, 한 번에 일괄 변환 (Batch Process) 한 장씩 바꿀 필요가 없습니다. 구글 드라이브에서 복사한 여러 개의 링크를 텍스트 박스에 통째로 붙여넣으면, 각 링크의 고유 ID만 정규표현식으로 쏙쏙 뽑아내어 한 번에 직링크로 바꿔줍니다.
2. 포트폴리오 제작에 최적화된 포맷 지원 단순 URL뿐만 아니라, 상황에 맞게 바로 복붙할 수 있도록 코드를 생성해 줍니다.
- HTML ( <img> ): 개인 웹사이트나 티스토리 HTML 모드에서 사용
- Markdown ( ! [ ] ( ) ): 노션(Notion), 벨로그(Velog), 깃허브(GitHub) 작성 시 사용
- 이미지 Alt 텍스트(자동 넘버링)와 Width 속성도 툴 안에서 클릭 몇 번으로 설정할 수 있습니다.
3. 서버에 데이터를 전송하지 않아 보안상 안전합니다.
어떻게 쓰나요?
- 구글 드라이브에서 공유할 이미지들의 권한을 '링크가 있는 모든 사용자에게 공개'로 변경합니다.
- 이미지들의 링크를 복사하여 변환기 창에 붙여넣습니다. (여러 줄 붙여넣기 가능)
- 원하는 포맷(HTML/Markdown)을 선택하고 [변환하기] 버튼을 누릅니다.
- 완성된 코드를 복사해서 내 포트폴리오나 블로그에 붙여넣으면 끝!
디자이너의 시간은 소중하니까요
반복되는 단순 노동은 시스템에 맡기고, 우리는 공간의 비례와 디자인의 디테일을 고민하는 데 시간을 써야 합니다. 웹 포트폴리오를 준비하는 건축학도, 디자이너 분들의 야근을 조금이나마 줄여주는 유용한 도구가 되길 바랍니다!
🌐 개발 비하인드 & 포트폴리오 보기 이 툴이 어떻게 만들어졌는지 기술적인 과정이 궁금하시다면, 제 포트폴리오 사이트에서 확인해 보실 수 있습니다.
