Short Story) 웹피(WebP)로 이룬 기적: 고등학생의 도전과 성장 일기

<웹피(WebP)로 이룬 기적: 고등학생의 도전과 성장 일기>

---

안녕하세요, 저는 고등학교 2학년인 재훈이라고 합니다. 오늘은 제가 겪은 특별한 이야기를 여러분께 들려드리려고 해요. 이 이야기는 제가 어떻게 **웹피(WebP)**라는 이미지 형식을 통해 수많은 시련을 극복하고 성장하게 되었는지에 대한 것입니다.

프롤로그: 꿈을 향한 첫걸음

고등학교 2학년이 되면서 저는 학교의 IT 동아리에서 활동하게 되었습니다. 우리 동아리는 매년 전국 규모의 웹사이트 제작 대회에 참가하는데, 올해는 제가 팀장을 맡게 되었어요. 팀원은 저를 포함해 디자인에 재능 있는 미진, 코딩 천재인 동우, 그리고 기획과 문서 작성에 능한 유리까지 총 네 명이었어요.

"이번에는 꼭 상을 타자!" 제가 첫 회의에서 힘차게 말하자, 모두가 고개를 끄덕이며 동의했어요.

"주제는 '환경 보호'야. 어떻게 풀어볼까?" 유리가 아이디어를 물었어요.

미진이가 말했어요. "환경 문제에 대한 정보를 제공하고, 사용자들이 직접 참여할 수 있는 플랫폼을 만들면 어떨까?"

동우가 이어서 말했어요. "기술적으로도 최신 웹 기술을 활용해서 사용자 경험을 높여보자."

우리는 이렇게 열정적으로 프로젝트를 시작했습니다.

첫 번째 시련: 느린 웹사이트

몇 주 동안 열심히 작업한 끝에, 웹사이트의 기본적인 구조와 디자인을 완성했어요. 미진의 멋진 디자인과 유리의 탄탄한 콘텐츠, 동우의 깔끔한 코딩이 어우러져 우리가 원하는 방향으로 잘 진행되고 있었죠.

하지만 테스트를 해보니 큰 문제가 하나 있었습니다. 바로 웹사이트의 로딩 속도였어요.

"왜 페이지 로딩이 이렇게 느리지?" 제가 답답해하며 말했어요.

동우가 모니터를 보며 분석했어요. "이미지 파일의 용량이 너무 커. 고화질 이미지를 많이 사용해서 그런 것 같아."

미진이가 난감해하며 말했어요. "이미지의 화질을 낮추면 디자인 퀄리티가 떨어질 텐데... 어떻게 하지?"

유리가 고민스러운 표정으로 말했어요. "사용자들이 느린 로딩 속도 때문에 사이트를 떠나버릴 수도 있어."

우리는 첫 번째 시련에 부딪혔습니다. 웹사이트의 핵심은 사용자 경험인데, 로딩 속도가 느리면 아무리 좋은 콘텐츠도 소용이 없을 테니까요.

두 번째 시련: 이미지 최적화의 벽

우리는 이미지 최적화를 위해 여러 가지 방법을 시도했어요. JPEG의 품질을 낮춰보기도 하고, PNG 대신 GIF를 사용해보기도 했지만, 만족스러운 결과를 얻을 수 없었어요. 이미지의 화질이 떨어지면 디자인의 임팩트가 약해졌고, 파일 크기를 충분히 줄이지도 못했죠.

"이러다가는 디자인과 성능 모두 놓칠 것 같아." 제가 한숨을 쉬며 말했어요.

동우가 고개를 끄덕이며 말했어요. "다른 대안이 필요해. 새로운 이미지 형식을 찾아봐야 할 것 같아."

세 번째 시련: 미지의 기술, 웹피 도전하기

그때 유리가 인터넷에서 흥미로운 정보를 찾아냈어요.

"여러분, 혹시 **웹피(WebP)**라는 거 들어봤어요?"

"웹피? 그게 뭐야?" 우리가 동시에 물었어요.

유리가 설명했어요. "구글에서 개발한 차세대 이미지 형식인데, 기존 이미지보다 파일 크기가 훨씬 작으면서도 화질은 비슷하대요. 손실 및 무손실 압축도 지원하고, 투명도와 애니메이션까지 가능하대요."

미진이가 눈을 반짝이며 말했어요. "그럼 우리의 문제를 해결할 수 있겠네!"

동우가 신중하게 말했어요. "하지만 사용하기 어려울 수도 있어. 그리고 브라우저 호환성 문제도 있을 수 있고."

저는 팀장으로서 결정을 내려야 했어요. "일단 시도해보자. 우리가 직접 테스트해보고 판단하면 돼."

네 번째 시련: 자료의 부족과 언어의 장벽

우리는 웹피에 대해 더 알아보기로 했어요. 하지만 문제는 웹피에 대한 자료가 많지 않았다는 거였어요. 특히 한국어로 된 자료는 거의 없었죠.

"영어로 된 기술 문서를 읽어야 하나 봐." 동우가 말했어요.

저는 영어에 자신이 없었지만, 팀을 위해 용기를 내서 구글의 개발자 문서를 읽기 시작했어요. 손실 및 무손실 압축, VP8 비디오 코덱 기반의 압축 알고리즘, RIFF 파일 구조 등 생소한 용어들이 가득했어요.

"이걸 어떻게 이해하지?" 저는 머리를 쥐어뜯었어요.

그때 미진이가 말했어요. "우리 역할을 분담하자. 재훈이는 압축 알고리즘 부분을, 동우는 파일 구조를, 유리는 호환성과 지원 현황을 조사하면 어때?"

우리는 각자 맡은 부분을 열심히 공부하기 시작했어요. 서로 이해한 내용을 공유하면서 조금씩 웹피에 대한 지식을 쌓아갔어요.

다섯 번째 시련: 적용과 오류의 연속

드디어 이미지를 웹피로 변환하고 웹사이트에 적용해보기로 했어요. 구글에서 제공하는 cwebp라는 인코더를 사용해서 이미지를 변환했죠.

하지만 문제가 발생했어요. 일부 이미지는 변환 과정에서 오류가 발생했고, 웹사이트에서는 이미지가 제대로 표시되지 않았어요.

"왜 이러는 거지?" 제가 당황해서 말했어요.

동우가 코드를 확인하며 말했어요. "아마 파일 경로나 파일 형식에 문제가 있는 것 같아. 그리고 브라우저에서 웹피를 지원하지 않는 경우도 있어."

미진이가 실망하며 말했어요. "이렇게 하면 시간이 너무 많이 걸릴 것 같아."

하지만 저는 포기할 수 없었어요. "조금만 더 해보자. 문제를 하나씩 해결하면 분명히 방법이 있을 거야."

여섯 번째 시련: 호환성 문제와 대체 이미지 제공

우리는 웹피 이미지를 적용하면서 호환성 문제에 부딪혔어요. 최신 브라우저에서는 이미지가 잘 보였지만, 사파리 구버전이나 인터넷 익스플로러에서는 이미지가 전혀 표시되지 않았어요.

"이러면 사용자들이 이미지가 안 보일 텐데..." 유리가 걱정했어요.

동우가 아이디어를 냈어요. "<picture> 태그를 사용하면 어때? 웹피를 지원하지 않는 브라우저에서는 자동으로 대체 이미지를 보여줄 수 있어."

동우는 코드를 보여주었어요.

 

 

<picture>   <source srcset="image.webp" type="image/webp">   <img src="image.jpg" alt="대체 이미지"> </picture>

 

"이렇게 하면 모든 브라우저에서 이미지가 정상적으로 표시될 거야."

우리는 이 방법을 적용했고, 호환성 문제를 해결할 수 있었어요.

일곱 번째 시련: 서버 부하와 최적화

하지만 또 다른 문제가 기다리고 있었어요. 웹피 이미지와 대체 이미지를 모두 서버에 저장하다 보니 서버 용량과 관리에 부담이 생긴 거예요.

"이미지 파일이 두 배로 늘어나니까 서버 용량이 부족해지고 있어." 제가 말했어요.

유리가 말했어요. "그리고 사용자들이 두 가지 이미지를 모두 다운로드하면 오히려 로딩 속도가 느려질 수도 있어."

동우가 제안했어요. "이미지 최적화 도구를 사용해서 파일 크기를 더 줄여보자. 그리고 **CDN(Content Delivery Network)**을 활용하면 서버 부하를 줄일 수 있을 거야."

우리는 이미지 최적화 도구인 cwebp의 다양한 매개변수를 사용하여 압축률과 화질을 조절했고, CDN을 통해 이미지를 효율적으로 배포할 수 있게 되었어요.

여덟 번째 시련: 팀워크의 위기

여러 번의 시련을 겪으면서 팀원들 간의 의견 충돌도 생기기 시작했어요.

"이렇게까지 해야 해? 그냥 원래 방식대로 하면 안 돼?" 미진이가 지친 목소리로 말했어요.

유리도 동의했어요. "맞아, 너무 힘들어. 우리 시간이 부족한데 괜히 어려운 길로 가는 것 같아."

저는 팀장으로서 고민에 빠졌어요. 하지만 이대로 포기하면 지금까지의 노력이 물거품이 될 것 같았어요.

"우리 조금만 더 힘내자. 이 프로젝트를 성공시키면 우리가 한 단계 성장할 수 있을 거야." 제가 진심을 담아 말했어요.

동우가 말했어요. "맞아, 우리 모두 함께 시작한 일이잖아. 끝까지 해보자."

팀원들도 제 진심을 느꼈는지 고개를 끄덕이며 다시 힘을 내기 시작했어요.

아홉 번째 시련: 최종 검토와 버그 수정

프로젝트 마감일이 가까워지면서 우리는 최종 검토에 들어갔어요. 그런데 예상치 못한 버그들이 나타나기 시작했어요.

"왜 이 이미지가 깨져서 나오지?" 미진이가 말했어요.

동우가 코드를 확인하며 말했어요. "이미지 경로에 오타가 있었어. 그리고 일부 브라우저에서는 CSS가 제대로 적용되지 않네."

유리가 말했어요. "또 일부 콘텐츠가 모바일 화면에서 잘려나가고 있어."

우리는 밤을 새워가며 버그를 하나씩 수정했어요. 테스트 디바이스를 다양하게 준비해서 모든 환경에서 웹사이트가 정상적으로 작동하도록 노력했어요.

열 번째 시련: 프레젠테이션 준비

대회에서는 웹사이트뿐만 아니라 프레젠테이션도 중요했어요. 우리는 우리 프로젝트의 장점과 노력한 부분을 잘 전달하기 위해 프레젠테이션을 준비했어요.

하지만 발표 연습을 하면서 문제가 생겼어요.

"재훈아, 너 목소리가 너무 작아. 관객들이 잘 못 들을 거야." 유리가 지적했어요.

저는 발표에 대한 자신감이 없었어요. "미안해, 내가 발표를 잘 못해서..."

미진이가 격려하며 말했어요. "연습하면 돼. 우리가 도와줄게."

팀원들의 응원에 힘입어 저는 발표 연습을 반복했고, 점점 자신감을 가지게 되었어요.

결승선 통과: 대회의 날

마침내 대회 당일이 되었어요. 우리는 심사위원들 앞에서 우리의 웹사이트를 발표했어요.

"안녕하세요, 저희는 'Green Future' 팀입니다. 저희는 환경 보호를 주제로 웹사이트를 제작하였으며, **웹피(WebP)**를 활용하여 이미지 최적화와 웹 성능 향상에 집중하였습니다."

저는 떨리는 마음을 다잡으며 이어갔어요.

"웹피를 사용함으로써 이미지의 화질을 유지하면서도 파일 크기를 평균 30% 이상 줄일 수 있었습니다. 또한 <picture> 태그를 활용하여 브라우저 호환성 문제를 해결하였고, CDN을 통해 서버 부하를 최소화하였습니다."

심사위원들은 우리의 노력과 기술적 도전에 감탄하며 박수를 보냈어요.

결과 발표 시간, 우리의 팀은 대상을 수상하게 되었어요!

"여러분의 웹사이트는 기술적 완성도와 창의성 면에서 최고였습니다. 특히 웹피를 활용한 이미지 최적화는 인상적이었습니다." 심사위원장의 말에 우리는 뿌듯함을 느꼈어요.

에필로그: 새로운 도전과 성장

대회가 끝난 후, 우리는 더욱 끈끈한 팀이 되었어요. 그리고 새로운 목표를 세웠죠.

"웹피 2가 개발 중이라는데, 우리가 미리 공부해보자!" 동우가 말했어요.

유리가 웃으며 말했어요. "또 새로운 시련이 기다리고 있겠네?"

미진이가 말했어요. "하지만 이번 경험을 통해 우리가 얼마나 성장했는지 알게 되었잖아. 앞으로 어떤 도전이 와도 이겨낼 수 있어."

제가 자신 있게 말했어요. "맞아! 우리가 함께라면 무엇이든 해낼 수 있어!"

---

액자 속 이야기: 미래의 나에게 보내는 편지

그로부터 몇 년이 지나, 저는 대학에서 컴퓨터 공학을 전공하며 새로운 도전을 이어가고 있어요. 가끔 그때의 경험을 떠올리며 미소 짓곤 합니다.

최근에는 웹피 2가 출시되어 더 향상된 기능과 압축률을 제공하고 있어요. 저는 이를 활용한 새로운 프로젝트를 진행하고 있습니다.

그때의 경험은 저에게 큰 자산이 되었어요. 시련을 극복하고, 팀원들과 협력하며, 새로운 기술에 도전하는 법을 배웠죠.

미래의 나에게 한마디 전하고 싶어요.

"그때의 열정과 용기를 잊지 말자. 어떤 어려움이 와도 우리는 해낼 수 있어!"

---

이렇게 저는 웹피를 통해 많은 것을 배웠고, 그 경험은 지금의 저를 만들어주었습니다. 앞으로도 계속해서 성장하며 새로운 도전에 나설 것입니다.

 

 

 

#ref.:

https://sosohantry.tistory.com/entry/IT-WebP-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%98%95%EC%8B%9D-%EA%B0%9C%EC%9A%94-%EB%B0%8F-%EC%84%B8%EB%B6%80%EC%82%AC%ED%95%AD

IT) WebP 이미지 형식