URL 메타데이터 추출 기능 문서

kkrap 프로젝트에서 url을 저장하는 기능이 필요했다. url을 저장 후 사용자를 위해 제목, 파비콘, 썸네일을 추출하는 기능이 추가적으로 필요하였는데 이 부분의 개발 과정에 대해서 기술한다.

 

기능 개요

• 해당 기능은 사용자가 링크를 저장할 때, 해당 URL의 제목, 썸네일 이미지, 파비콘 정보를 자동으로 추출하여 저장하는 기능이다. 서비스에서 링크들을 수집하는 기능이 필요하고 거기에 대한 정보를 보여줄 기능이 필요하여 이 메타데이터를 추출하게 되었다.

 

기능 목적 및 배경

• 사용자가 링크를 저장할 때 단순한 URL 텍스트만 보여줄 경우, 시각적 정보 부족으로 인해 UX가 떨어짐
• 메타데이터를 자동 추출하면 링크의 내용을 직관적으로 파악할 수 있음
• 특히 SNS, 뉴스, 유튜브 등에서 제목과 썸네일, 파비콘의 정보가 유용함

 

설계 전략

아키텍처 흐름

1. 클라이언트로부터 링크 저장 요청
2. 백엔드에서 해당 URL로 Jsoup 연결 시도
3. HTML 파싱 후 메타데이터 추출
4. DB에 제목, 썸네일, 파비콘 저장

 

주요 클래스 설계

• LinksMetadataExtractor 클래스
  • Jsoup을 이용해 HTML 파싱 및 메타데이터 추출 수행

public class LinksMetadataExtractor {

    public static Metadata extract(String url) {
			try {
            Document doc = Jsoup.connect(url)
                    .userAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36")
                    .timeout(5000)
                    .get();
            //출력해보자
            System.out.println("Jsoup HTML 응답 (앞부분만):\\n" + doc.outerHtml().substring(0, Math.min(1000, doc.outerHtml().length())));

            Files.writeString(Paths.get("/tmp/jsoup_debug.html"), doc.outerHtml()); // html 저장 내 서버에 저장할 때는 경로가 다름 이거는 EC2 
            System.out.println("HTML 파일 저장 완료: /tmp/jsoup_debug.html");

            // 제목
            String title = doc.title();
            System.out.println("추출된 <title>: " + title);

            // 썸네일
            Element ogImage = doc.selectFirst("meta[property=og:image]");
            String thumbnail = ogImage != null ? ogImage.attr("content") : null;
            System.out.println("<meta property=\\"og:image\\"> 태그: " + (ogImage != null ? ogImage.outerHtml() : "없음"));

            // 파비콘
            String favicon = null;
            Element iconLink = doc.select("link[rel~=(?i)^(shortcut icon|icon)$]").first();
            if (iconLink != null) {
                favicon = iconLink.attr("href");
                System.out.println("<link rel=\\"icon\\"> 태그: " + iconLink.outerHtml());

                // 상대 경로라면 절대 경로로 변환
                if (favicon != null && !favicon.startsWith("http")) {
                    URL base = new URL(url);
                    favicon = new URL(base, favicon).toString();
                }
            }
            else {
                System.out.println("  <link rel=\\"icon\\"> 태그: 없음");
            }

            return new Metadata(title, thumbnail, favicon);

        } catch (Exception e) {
            e.printStackTrace();
            return new Metadata(null, null, null);
        }
    }
}

 

기타 참고

Jsoup으로 잘 되어서 EC2에 배포를 했더니,,, 제대로 작동되지 않는다.. 뭐가 문제일까 ㅠㅠㅠ 밑 해결 내용은 다음 문서에서 확인해보자

• 관련 이슈: #메타데이터 파싱 실패 EC2 환경
• 후속 문서: URL 메타데이터 추출 기능 개선 문서