개발 일기

[TECH4GOOD 해커톤] TECH4GOOD AI 해커톤 우수상 본문

공모전 기록

[TECH4GOOD 해커톤] TECH4GOOD AI 해커톤 우수상

개발 일기장 주인 2024. 8. 26. 17:42

2024년 08월 21일 ~ 2024년 08월 22일 1박 2일로 진행된 SK Telecom & 하나 금융 그룹에서 주최 TECH4GOOD AI 해커톤에 참가했다.

대회 2주전에 이러한 조합으로 팀 빌딩을 주최 측에서 해주셨다. 그런데 AI담당자와 백엔드 개발자 한분이 건강 및 개인 사정으로 불참하게되었고 기획자 한 분, 프론트 개발자 한 분 그리고 백엔드 담당인 나 이렇게 3명에서 대회에 참여할 수 밖에 없었다.

 

우리가 개발한 서비스는?

대회 가기전에 몇 차례 회의를 통해 "시각장애인들을 위한 대체 텍스트 자동 생성 크롬 확장 프로그램"이라는 주제를 잡고 가보기로 했다.

시각 장애인들은 스크린 리더라는 기술을 통해 웹 탐색을 하게되는데 화면의 텍스트 및 이미지를 읽어주는 기술이다. 이때 이미지는 대체 텍스트라는 기능을 통해 <img>태그 안에 alt 속성을 읽어주게 되는 것이다. 그러나 직접 스크린 리더를 돌려봤을때 쿠팡, 무신사, 알리 익스프레스 그리고 11번가 등 주요 쇼핑 사이트에서 상세 정보를 이미지로 보여주는 곳이 많았는데 해당 상세 정보를 얻기 위해 그 이미지를 스크린 리더로 실행시켰을때 "이미지"라고 읽어주거나 그 이미지의 파일명을 읽어줘서 그 이미지가 어떤 이미지인지 어떤 정보를 담고 있는지 알기 힘들어 온라인 쇼핑에 있어서 페인 포인트가 있음을 인지했고 이를 gpt-4o-mini 모델을 통해 대체 텍스트를 생성해주는 크롬 확장 프로그램을 통해 개선하고자 했다.

처음에는 Segment Anything Model2라는 Image Segment 및 Caption을 출력하는데 초점을 맞춘 모델을 사용하려고 했지만 해당 모델은 OCR처럼 이미지 형태의 텍스트를 분석하는데 한계를 보였고 그렇다고 OCR 그 자체를 쓰자니 또 시각 장애인들이 받아들이기 쉽게 뭔가 생성형 AI 처리가 필요하다고 생각됐었다. 그래서 이 두가지 모두 Vision처리와 생성형 AI 처리가 한번에 가능하고 비용도 저렴하고 대체 텍스트 생성에 있어서 충분한 성능을 가진 gpt-4o-mini 모델을 선택하게 됐다.

 

어쨋든 이것은 크롬 확장 프로그램이 실행된 상태에서 마우스를 이미지 위에 1초간 올려두면 실행되도록 처리해야했는데 내가 Python으로 Flask 서버를 구축했고 Flask 서버에서 API를 파서 이미지 URL을 바디에 담아서 POST요청을 보내면 해당 이미지 URL을 바탕으로 이미지 분석후 대체 텍스트를 생성하여 텍스트 타입으로 프론트로 반환하도록 했다.(배포까지 완료)

그런다음 프론트 즉, 클라이언트에서는 생성된 대체 텍스트를 전달받으면 Text-to-Speech(TTS)를 통해서 음성으로 출력하여 시각장애인이 그 생성된 대체 텍스트를 청각으로 인지할 수 있도록 처리했다.

 

 

해커톤 당일에 멘토님들께서 저기에다가 추가로 웹사이트에서 특정 페이지로 넘어갔을때 그 페이지에 대한 요약? 왜냐하면 시각 장애인이 그 전체 페이지를 스크린 리더를 통해 탐색하면서 파악하는데 오랜 시간이 걸려 페이지 전체에 대한 요약을 하는 기능을 추가하면 좋겠다고 해서 내가 직접 그자리에서 해당 기능에 대한 API를 추가 구현했다.

클라이언트에서 웹 페이지가 전환되면 해당 웹 페이지의 url을 요청 바디에 담아서 넘겨주면 셀레니움 및 크롬 웹 드라이버를 통해 해당 url의 HTML 문서를 모두 긁어 온다. 긁어온 HTML은 BeautifulSoup로 <head>태그와 <body>태그에서 텍스트를 추출하고 그 텍스트를 프롬프트 엔지니어링 된 gpt-4o mini 모델로 보내고 요약 텍스트를 프론트로 응답 보낸다. 그러고 프론트에서 요약 텍스트를 TTS로 음성 형태의 출력을 하는 것이다.

 

 

해커톤 대회 당일 및 심사 결과

해커톤 당일에 팀원들과 제대로 처음 인사를 나눴고 정말 1박2일동안 붙어있으면서 자연스럽게 점점 친해진 것 같았다.

우리 그룹에 배정된 멘토님들도 데이터 관련 직군 그리고 프론트 개발자셨는데 두 분 모두 당장 이 대회에서 뿐만아니라 우리 개발 인생에 있어서 도움될 얘기도 정말 많이 해주시고 조언도 많이 주셔서 정말 감사했고 무엇보다도 너무 너무 친절하셨다. 나도 약간 그 사람들 처럼 되고 싶다는 생각이 절로 들었다.

 

1박2일간 커피 4잔, 핫식스 2캔과 함께 거의 밤을 샜다.

중간 중간에 간식 박스, 24시간 무료 카페?, 컵라면이랑 분식 등 먹을거 엄청 줘서 배고프진 않았다.

사실 여유로울 줄 알았는데 막상 가보니 이런저런 에러와 이슈들로 잠은 무슨 정말 바쁜 1박2일을 보냈다.

그렇게 다음날 아침에 발표가 시작됐고 우린 2번째로 발표했다.

나는 앉아만 있는데도 카페인을 너무 많이 먹어서 그런지 더 긴장되고 떨렸는데 우리 기획자 동훈이가 떨지도 않고 아주 멋지게 발표해줘서 정말 고마웠다.

발표가 모두 끝나고 심사가 시작됐고 아이디어상부터 장려상, 우수상 이렇게 발표됐다.

우리는 우수상을 수상했다.

다른 팀은 5~6명이였지만 우리 팀은 3명에서도 동훈이는 기획 및 디자인, 승연이는 프론트/AI, 나는 서버/AI/인프라 각자가 맡은 바를 열심히 했고 다른 팀에 뒤쳐지지 않고 나름 준수한 성적을 거둔 것 같다.

팀원들께 다시 한번 감사하다고 전하고 싶고 덕분에 정말 재밌고 값진 경험 했던 것 같다.

'공모전 기록' 카테고리의 다른 글

[하나 디지털 파워온] 전세 사기 탐지 서비스 - 떼이지마 전세원큐  (0) 2025.03.02
[멋쟁이 사자처럼 중앙 해커톤] 인생 첫 번째 해커톤 본선 진출  (2) 2024.08.14
'공모전 기록' Related Articles more