나이는 데이터일 뿐, 배려를 담아 세상을 읽는 나만의 기술: 대체 텍스트(Alt Text)와의 첫 만남 ✨

AI학과 26학번 새내기이자, 배움의 매 순간마다 가슴이 두근거리는 50대 만학도 아줌마입니다. 나이는 숫자가 아니라 데이터(Data)일 뿐이라는 마음으로 도전한 대학 생활, 이번 한 학기 동안 HTML와 CSS를 배우며 제 디지털 세계관이 완전히 뒤집히는 경험을 했습니다.

처음에는 그저 블로그(Blog)에 예쁜 사진을 올리고 아래에 짧은 설명을 적는 것이 전부인 줄 알았습니다. 하지만 수업 시간에 모두를 위한 웹, 즉 **웹 접근성(Web Accessibility)**을 배우며 깊은 깨달음을 얻었습니다. 이미지를 볼 수 없는 시각장애인이나 시스템 오류로 사진이 엑스박스로 뜰 때, 그 자리에 무엇이 있는지를 말로 설명해 주는 대체 텍스트(Alt Text)가 필수라는 사실을 알게 된 것이죠. "내가 무심코 올린 사진들을 보지 못하는 사람들은 이 화면을 어떻게 이해할까?"라는 따뜻한 궁금증에서 시작해, 제미나이(Gemini)와 함께 정복한 대체 텍스트(Alt Text) 입력하는 법의 감동적인 여정을 소개해 드립니다!

## 1. 웹 접근성(Web Accessibility) 수업에서 시작된 초보 블로거의 고민 💡

단순히 검색 로봇(Search Robot)에게 잘 보이기 위한 기술인 줄만 알았는데, 스크린 리더(Screen Reader)를 통해 세상을 읽는 시각장애인분들에게는 이 텍스트가 사진 그 자체라는 사실을 알고 나니 가슴이 찡해졌습니다. 하지만 막상 제 블로그(Blog)에 적용하려니 방법이 낯설어 허둥대기 일쑤였죠. "따옴표('')를 넣어야 코드가 완성되나?", "어떻게 적어야 모두에게 친절한 설명이 될까?" 고민이 꼬리를 물었습니다.

결국 제 단짝인 AI 튜터(AI Tutor) 제미나이(Gemini)에게 질문을 쏟아부었습니다.

나의 질문 1: "Alt 태그(Alt Tag)를 제대로 넣는 공식이 따로 있나요?"
나의 질문 2: "대체 텍스트(Alt Text)를 입력할 때 따옴표는 왜 안 넣는 게 좋나요?"

사소한 따옴표를 붙이냐, 빼냐의 궁금증부터 설정과정까지 인공지능(AI)은 바로바로 해결해 주었습니다. 사용자가 별도로 따옴표를 또 넣으면 코드가 꼬여 프로페셔널(Professional)하게 인식되지 않는다나~ 디테일(Detail) 하나에 담긴 기술과 배려를 배우며 저는 또 한 뼘!

## 2. 제미나이(Gemini)에게 배운 대체 텍스트(Alt Text) 및 이미지 최적화 단계별 알고리즘(Algorithm) 🚀

누구나 쉽게 따라 할 수 있도록, 저와 제미나이(Gemini)가 함께 정립한 단계별(Step by Step) 이미지 관리 루틴(Routine)을 공개합니다.

Step 1: 전략적인 파일명 지정과 구글 드라이브(Google Drive) 정리 단순히 '캡처1', '이미지'로 저장하던 나쁜 습관부터 고쳤습니다. 컴퓨터가 읽기 쉽도록 키워드를 조합해 favicon-fluamondo.png처럼 명확하게 이름을 지었습니다. 그리고 구글 드라이브(Google Drive)에 '블로그_이미지_최종' 폴더를 만들어 체계적으로 관리하기 시작했습니다.

파일명 : how-to-set-alt-text-for-blogger-image-settings.jpg
사진위를 클릭하면 사진색이 변하면서 설정(톱니바퀴)를 누르고 들어가야 다음이 열립니다.

파일명:

blogger-alt-text-input-field.jpg
대체 텍스트, 제목텍스트, 사진크기를 설정하고 업데이트 누르기

Step 2: 시각장애인과 로봇 모두를 배려하는 대체 텍스트(Alt Text) 작성법

사진을 보지 못하는 사람에게 눈앞의 풍경을 다정하게 말해 주듯 구체적인 텍스트(Text)를 입력하는 것이 핵심입니다.

나쁜 예: 대체 텍스트(Alt Text) 입력사진 (의미 없는 단어 나열)
좋은 예: 50대 여성 블로거가 미소를 지으며 노트북 화면에 시각장애인을 위한 대체 텍스트를 입력하는 모습

Step 3: 레이아웃(Layout)과 가독성을 높이는 툴팁(Tooltip) 설정

사진 크기는 눈이 편안하도록 '중간' 혹은 '크게'로 조절하고, 줄바꿈은 '중앙 정렬'을 선택해 잡지(Magazine)처럼 깔끔한 레이아웃(Layout)을 만듭니다. 마우스를 올렸을 때 나타나는 '제목 텍스트(Title Text)'인 툴팁(Tooltip)까지 꼼꼼히 챙기면 완성입니다.

더 상세하고 정확한 블로그 이미지 관리법을 배우고 싶다면, 공식 구글 블로그 고객센터 이미지 관리 가이드를 방문하여 전문가들의 노하우를 직접 확인해 보시는 것을 강력히 추천합니다!

## 3. 기술에 다정한 온기를 더하는 명품 블로그(Blog) 📌

단순히 글을 '올리는' 작업에서 벗어나, 보이지 않는 독자의 시선까지 '배려하는' 방법을 배우고 나니 제 블로그(Blog)가 한층 더 아름답게 보이기 시작했습니다. 템플릿(Template)을 맞춰 가며 정성스레 대체 텍스트(Alt Text)와 축소판 미리보기 이미지인 썸네일(Thumbnail)을 정돈하다 보니, 어느새 제 공간에서 전문가의 향기가 솔솔 풍기는 것 같은데, ㅠㅠ 현실은 생노가다네요…아무것도 몰라 기존의 업로드한 블로그의 사진들을 다시 밀고 정리중 ㅠ , 이 따뜻하고 고된 하이테크(High-Tech) 생존기는 계속됩니다!

## 4. AI학과 26학번 아줌마의 눈높이 용어 정리 💻

웹 접근성(Web Accessibility): 장애인이나 고령자 등 모든 사용자가 웹사이트에서 제공하는 정보에 동등하게 접근하고 이해할 수 있도록 보장하는 방침입니다. 엘리베이터 옆의 휠체어 경사로 같은 역할입니다.
대체 텍스트(Alt Text / Alt Tag): 하이퍼텍스트 마크업 언어(HTML)에서 이미지를 설명하는 속성입니다. 시각장애인이 스크린 리더를 쓸 때 사진 대신 읽어주며, 검색 로봇이 이미지를 파악하는 핵심 단서가 됩니다.
인터페이스(Interface): 사용자가 컴퓨터 프로그램이나 시스템을 편리하게 다룰 수 있도록 도와주는 화면 구성이나 작업 환경을 뜻합니다.

## 5. 독수리타자 아줌마의 다음 목표 🌟

배움이란 단순히 지식을 쌓는 것이 아니라, 세상과 소통하는 방법을 넓혀가는 과정이라는 것을 이번 미션을 통해 다시금 깨달았습니다. 오늘 제가 배려를 담아 세팅한 이 이미지들이 인터넷 바다를 건너 더 많은 분께 닿기를 소망합니다.

여러분의 소중한 공감과 댓글 하나는 대학생 아줌마를 춤추게 하는 가장 큰 데이터(Data)가 됩니다!

다음 하이테크(High-Tech) 성장기도 많이 기대해 주세요!

이 블로그 검색

웹 접근성을 위한 대체 텍스트(Alt Text) 가이드: 50대 만학도의 블로그 도전기