❗ [버그][인스타] 인스타 url 내부 정보 추출시 다른 게시글 썸네일 이미지도 함께 추출되는 문제

[Cassiiopeia]

🗒️ 설명

• 현재 이미지 url을 받아올때
• 그 게시글에 대한 여러가지 이미지를 추출해야하는데
• 아래 불필요한 내용의 이미지를 추출해오고있다
• 예를들면

https://www.instagram.com/p/DO-u-YwD6Rt

를했으면

<div role="button" aria-hidden="true" class="x1qjc9v5 x972fbf x10w94by x1qhh985 x14e42zd x9f619 x78zum5 xdt5ytf x2lah0s xk390pu xdj266r x14z9mp xat24cr x1lziwak xexx8yu xyri2b x18d9i69 x1c1uobl x1n2onr6 xggy1nq x11njtxf" tabindex="0"><div class="x1n2onr6"><div class="x1iyjqo2"><div class="x1qjc9v5 x972fbf x10w94by x1qhh985 x14e42zd x9f619 x78zum5 xdt5ytf x2lah0s x1o0tod xdj266r x14z9mp xat24cr x1lziwak xexx8yu xyri2b x18d9i69 x1c1uobl x1n2onr6 x13vifvy x11njtxf"><div class="x1lliihq x1n2onr6"><div class="x1qjc9v5 x972fbf x10w94by x1qhh985 x14e42zd x9f619 x1lliihq xdt5ytf x2lah0s xdj266r x14z9mp xat24cr x1lziwak xexx8yu xyri2b x18d9i69 x1c1uobl x1n2onr6" style="aspect-ratio: 0.75 / 1;"></div><div class="html-div xdj266r x14z9mp xat24cr x1lziwak xexx8yu xyri2b x18d9i69 x1c1uobl x9f619 xjbqb8w x78zum5 x15mokao x1ga7v0g x16uus16 xbiv7yw x10l6tqk x1ey2m1c x13vifvy x1o0tod xtijo5x x1plvlek xryxfnj x1c4vz4f x2lah0s xdt5ytf xqjyukv x1qjc9v5 x1oa3qoh x1nhvcw1"><div class="x1qjc9v5 x9f619 x78zum5 xdt5ytf xln7xf2 xk390pu x5yr21d x1n2onr6 x11njtxf xh8yej3"><div class="x1qjc9v5 x78zum5 x1q0g3np x5yr21d xw2csxc x10wlt62 x1n2onr6 x1rohswg xfk6m8" role="presentation" style=""><div class="x1qjc9v5 x9f619 x78zum5 x1q0g3np xln7xf2 xk390pu x5yr21d x1n2onr6 x11njtxf" style=""><ul class="_acay"><li style="transform: translateX(5390px); width: 1px;"></li><li class="_acaz" tabindex="-1" style="transform: translateX(2246.25px);"><div style="align-items: center; display: flex; height: 100%; justify-content: center; width: 449.25px;"><div style="max-height: 100%; max-width: 100%; width: 100%;"><div class="x1i10hfl"><div><div class="_aagu"><div class="_aagv" style="padding-bottom: 133.333%;"><img alt="Photo by 잠실리즘 on September 24, 2025." class="x5yr21d xu96u03 x10l6tqk x13vifvy x87ps6o xh8yej3" crossorigin="anonymous" src="https://scontent-lax3-2.cdninstagram.com/v/t51.82787-15/553885247_17861780487481058_8122404481268794428_n.jpg?stp=dst-jpg_e35_tt6&amp;_nc_cat=111&amp;ig_cache_key=MzcyODYyNDEyNDkzMjYwOTM3OQ%3D%3D.3-ccb7-5&amp;ccb=7-5&amp;_nc_sid=58cdad&amp;efg=eyJ2ZW5jb2RlX3RhZyI6InhwaWRzLjEyMDZ4MTYwOC5zZHIuQzMifQ%3D%3D&amp;_nc_ohc=gY78kNy5UkgQ7kNvwHgrUJZ&amp;_nc_oc=Adn9xUuOLtkhBud51pV1-4tnKd6QvA1BI-u6pCcZwyygTX4HfpawlgJNCcVFDIksmfA&amp;_nc_ad=z-m&amp;_nc_cid=0&amp;_nc_zt=23&amp;_nc_ht=scontent-lax3-2.cdninstagram.com&amp;_nc_gid=rFZsIBouH-8IX8ycvVLuWw&amp;oh=00_AfoI2THIZFk7vNdtfjZuJMfwUO5GY9ZXzufIRhdRi8crlA&amp;oe=696C3AC5" style="object-fit: cover;"></div><div class="_aagw"></div></div></div></div></div></div></li><li class="_acaz" tabindex="-1" style="transform: translateX(2695.5px);"><div style="align-items: center; display: flex; height: 100%; justify-content: center; width: 449.25px;"><div style="max-height: 100%; max-width: 100%; width: 100%;"><div class="x1i10hfl"><div><div class="_aa1z _aa1_"><div class="_aagu _aa20" role="button" tabindex="-1"><div class="_aagv" style="padding-bottom: 133.333%;"><img alt="Photo shared by 잠실리즘 on September 24, 2025 tagging @kimtaewansushisongpa." class="x5yr21d xu96u03 x10l6tqk x13vifvy x87ps6o xh8yej3" crossorigin="anonymous" src="https://scontent-lax3-2.cdninstagram.com/v/t51.82787-15/553642560_17861780496481058_8570492162897060294_n.jpg?stp=dst-jpg_e35_tt6&amp;_nc_cat=111&amp;ig_cache_key=MzcyODYyNDEyNDkzMjYyNzIwMg%3D%3D.3-ccb7-5&amp;ccb=7-5&amp;_nc_sid=58cdad&amp;efg=eyJ2ZW5jb2RlX3RhZyI6InhwaWRzLjEyMDZ4MTYwOC5zZHIuQzMifQ%3D%3D&amp;_nc_ohc=Z5YvpB_r7MMQ7kNvwGUeUfo&amp;_nc_oc=AdmjXEVIMIygoXa-JKU1syU22RXNaRQdd_azlA3_3DEiINI5x3dVJkDFMQ9SEhlBb8s&amp;_nc_ad=z-m&amp;_nc_cid=0&amp;_nc_zt=23&amp;_nc_ht=scontent-lax3-2.cdninstagram.com&amp;_nc_gid=rFZsIBouH-8IX8ycvVLuWw&amp;oh=00_Afp6pqI0sH6XwLnu5HxLCf6eH3di2tofHuxjzG9lmEp8Nw&amp;oe=696C11E7" style="object-fit: cover;"></div><div class="_aagw"></div></div><div class="x1m7ywf0 x12ol6y4 x180vkcf x1khw62d x709u02 x972fbf x10w94by x1qhh985 x14e42zd x1ypdohk x14vqqas xbmvrgn xod5an3 x1diwwjn x13dflua x19991ni x1ey2m1c x1o0tod x10l6tqk x1hc1fzr"><button class=" _aswp _aswq _aswu _asw_ _asx2" type="button"><div class="html-div xdj266r x14z9mp xat24cr x1lziwak x9f619 xjbqb8w x78zum5 x15mokao x1ga7v0g x16uus16 xbiv7yw xf159sx xmzvs34 xwib8y2 x1y1aw1k x1n2onr6 x1plvlek xryxfnj x1c4vz4f x2lah0s x1q0g3np xqjyukv x6s0dn4 x1oa3qoh xl56j7k"><svg aria-label="Tags" class="x1lliihq x1n2onr6 x9bdzbf" fill="currentColor" height="12" role="img" viewBox="0 0 24 24" width="12"><title>Tags</title><path d="M12 12c3.032 0 5.5-2.468 5.5-5.5S15.032 1 12 1a5.507 5.507 0 0 0-5.5 5.5C6.5 9.532 8.968 12 12 12Zm9.553 6.27C19.396 15.283 15.825 13.5 12 13.5c-3.824 0-7.396 1.782-9.552 4.768a2.317 2.317 0 0 0-.315 2.149 2.45 2.45 0 0 0 1.665 1.537C5.517 22.431 8.335 23 12 23c3.668 0 6.479-.565 8.19-1.04a2.464 2.464 0 0 0 1.678-1.544 2.312 2.312 0 0 0-.315-2.146Z" fill="currentColor"></path></svg></div></button></div><div class="_aa1y" style="left: 37.8109%; margin-top: 6px; top: 57.5456%; transform: translate(-50%, 0%) scale(0);"><a class="x1i10hfl xjbqb8w x1ejq31n x18oe1m7 x1sy0etr xstzfhl x972fbf x10w94by x1qhh985 x14e42zd x9f619 x1ypdohk xt0psk2 x3ct3a4 xdj266r x14z9mp xat24cr x1lziwak xexx8yu xyri2b x18d9i69 x1c1uobl x16tdsg8 x1hl2dhg xggy1nq x1a2a7pz _aa1q _a6hd" href="/kimtaewansushisongpa/" role="link" tabindex="-1"><span class="_aa1p"><div class="x1idio02 xqm4iv x1o3jo1z xburx9h xv5lvn5 x8u93l6 x972fbf xtu2xtp x13fuv20 x18b5jzi x1q0q8m5 x1t7ytsu xqtp20y xbudbmw xw01apr x10l6tqk xnalus7" style="left: 50%;"></div><span class="x972fbf x10w94by x1qhh985 x14e42zd xln7xf2 xk390pu xdj266r xbmvrgn xat24cr x1diwwjn xexx8yu xyri2b x18d9i69 x1c1uobl x11njtxf">kimtaewansushisongpa</span></span></a></div></div></div></div></div></div></li><li class="_acaz" tabindex="-1" style="transform: translateX(3144.75px);"><div style="align-items: center; display: flex; height: 100%; justify-content: center; width: 449.25px;"><div style="max-height: 100%; max-width: 100%; width: 100%;"><div class="x1i10hfl"><div><div class="_aagu"><div class="_aagv" style="padding-bottom: 133.333%;"><img alt="Photo by 잠실리즘 on September 24, 2025." class="x5yr21d xu96u03 x10l6tqk x13vifvy x87ps6o xh8yej3" crossorigin="anonymous" src="https://scontent-lax3-2.cdninstagram.com/v/t51.82787-15/552767259_17861780505481058_6679934408179062404_n.jpg?stp=dst-jpg_e35_tt6&amp;_nc_cat=106&amp;ig_cache_key=MzcyODYyNDEyNDc5ODM4NDcxNA%3D%3D.3-ccb7-5&amp;ccb=7-5&amp;_nc_sid=58cdad&amp;efg=eyJ2ZW5jb2RlX3RhZyI6InhwaWRzLjEyMDZ4MTYwOC5zZHIuQzMifQ%3D%3D&amp;_nc_ohc=ZDpnXcQMEJcQ7kNvwEbkG2Q&amp;_nc_oc=Adm-CkKFfivZfQchIvJO366ca0-3LjAUnWTsaXXWKUs0BWv_Q0E_-vSTUayGcUa3gjI&amp;_nc_ad=z-m&amp;_nc_cid=0&amp;_nc_zt=23&amp;_nc_ht=scontent-lax3-2.cdninstagram.com&amp;_nc_gid=rFZsIBouH-8IX8ycvVLuWw&amp;oh=00_AfpRViKJOKcyQ7QTeCp1KpbMAR7LCh29Kx3Vf7O0GWIOyw&amp;oe=696C1CF7" style="object-fit: cover;"></div><div class="_aagw"></div></div></div></div></div></div></li><li class="_acaz" tabindex="-1" style="transform: translateX(3594px);"><div style="align-items: center; display: flex; height: 100%; justify-content: center; width: 449.25px;"><div style="max-height: 100%; max-width: 100%; width: 100%;"><div class="x1i10hfl"><div><div class="_aagu"><div class="_aagv" style="padding-bottom: 133.333%;"><img alt="Photo by 잠실리즘 on September 24, 2025." class="x5yr21d xu96u03 x10l6tqk x13vifvy x87ps6o xh8yej3" crossorigin="anonymous" src="https://scontent-lax3-2.cdninstagram.com/v/t51.82787-15/553688907_17861780523481058_5845047173995870701_n.jpg?stp=dst-jpg_e35_tt6&amp;_nc_cat=106&amp;ig_cache_key=MzcyODYyNDEyNDc5MDAwMzk2NQ%3D%3D.3-ccb7-5&amp;ccb=7-5&amp;_nc_sid=58cdad&amp;efg=eyJ2ZW5jb2RlX3RhZyI6InhwaWRzLjEyMDZ4MTYwOC5zZHIuQzMifQ%3D%3D&amp;_nc_ohc=i7vlTPJz2csQ7kNvwHph2Aa&amp;_nc_oc=AdkbR-nSlgf44dQbquVBwwX2Ap2Z775K2HAu_tpn1wJp0oLcRyaXm-foEHH9AIOM3fc&amp;_nc_ad=z-m&amp;_nc_cid=0&amp;_nc_zt=23&amp;_nc_ht=scontent-lax3-2.cdninstagram.com&amp;_nc_gid=rFZsIBouH-8IX8ycvVLuWw&amp;oh=00_AfoHWbb1Y9B0gkqNDoSbxH1ciEecJh7rlschsUVtWv_wiw&amp;oe=696C311A" style="object-fit: cover;"></div><div class="_aagw"></div></div></div></div></div></div></li></ul></div></div><button aria-label="Go back" class=" _afxv _al46 _al47" tabindex="-1"><div class=" _9zm0"></div></button><button aria-label="Next" class=" _afxw _al46 _al47" tabindex="-1"><div class=" _9zm2"></div></button></div></div></div><div class="x6s0dn4 x1oozmrk x1f889gz xrr41r3 xl56j7k x47corl x10l6tqk _acvz _acnc _acng"><div class="_acnb"></div><div class="_acnb"></div><div class="_acnb"></div><div class="_acnb"></div><div class="_acnb"></div><div class="_acnb"></div><div class="_acnb _acnf"></div><div class="_acnb"></div><div class="_acnb"></div><div class="_acnb"></div><div class="_acnb"></div><div class="_acnb"></div></div></div></div><div></div></div></div>

해당부분에 들어있는 이미지 전체를 추출해서 가져올수있어야한다

해당 글을 올린 이미지 프로필을 따로 추출하면 또 쓸데가있어보인다 아무튼간에 지금 불필요한 다른 게시글 이미지를 가져오고있는데 이거 판단할수있어야한다

<img alt="jamsilism's profile picture" class="xpdipgo x972fbf x10w94by x1qhh985 x14e42zd xk390pu x5yr21d xdj266r x14z9mp xat24cr x1lziwak xl1xv1r xexx8yu xyri2b x18d9i69 x1c1uobl x11njtxf xh8yej3" crossorigin="anonymous" draggable="false" src="https://scontent-icn2-1.cdninstagram.com/v/t51.2885-19/608295598_17872854909481058_6111678103116043701_n.jpg?stp=dst-jpg_s150x150_tt6&amp;efg=eyJ2ZW5jb2RlX3RhZyI6InByb2ZpbGVfcGljLmRqYW5nby4xMDgwLmMyIn0&amp;_nc_ht=scontent-icn2-1.cdninstagram.com&amp;_nc_cat=1&amp;_nc_oc=Q6cZ2QGpyPa6M3K3WM9EUEqRbcXTRq4e3swu42y9_b21WPmDpo3g-MTPgDJzi-yXxJvhbM0&amp;_nc_ohc=yAPocbSebMEQ7kNvwHvvvcp&amp;_nc_gid=L_LQKP5P9g655ZXuL7Kd4Q&amp;edm=APs17CUBAAAA&amp;ccb=7-5&amp;oh=00_Afra9t8FkDfLvyLYiDuMuJ85T2239Jzu-DCRXzNLzyQy0A&amp;oe=696C1E0F&amp;_nc_sid=10d13b">

🔄 재현 방법

1. 문제 발생 위치로 이동 (예: 특정 페이지 또는 기능)
2. 특정 동작 수행 (예: 버튼 클릭, 데이터 입력 등)
3. 버그가 발생한 결과 확인

📸 참고 자료

✅ 예상 동작

• 모든 이미지가 해당 url게시글 관련 post이미지여야한다
• 게시글 올린 아이디의 프로필이미지는 별도로 가져오면좋다

⚙️ 환경 정보

• OS:
• 브라우저:
• 기기:

🙋‍♂️ 담당자

• 백엔드: @Cassiiopeia
• 프론트엔드: 이름
• 디자인: 이름

[Cassiiopeia]

Guide by SUH-LAB

브랜치

20260113_#9_인스타_url_내부_정보_추출시_다른_게시글_썸네일_이미지도_함께_추출되는_문제

커밋 메시지

인스타 url 내부 정보 추출시 다른 게시글 썸네일 이미지도 함께 추출되는 문제 : feat : {변경 사항에 대한 설명} https://github.com/MapSee-Lab/MapSee-AI/issues/9

[Cassiiopeia]

구현 보고서: Instagram 이미지 추출 버그 수정

이슈: #9 인스타 url 내부 정보 추출시 다른 게시글 썸네일 이미지도 함께 추출되는 문제
작성일: 2026-01-14
담당자: @Cassiiopeia

---

📌 작업 개요

Instagram 게시글 스크래핑 시 "More posts from" 섹션의 다른 게시글 썸네일 이미지가 함께 추출되는 버그 수정. 캐러셀 슬라이더 내의 이미지만 정확히 추출하도록 개선하고, 작성자 프로필 이미지를 별도 필드로 분리.

---

🔍 문제 분석

기존 문제점

1. ._aagu, ._aagv 클래스 셀렉터가 캐러셀 내부뿐만 아니라 "More posts from" 섹션에서도 사용됨
2. 게시글에 10-12장의 이미지가 있지만 불필요한 다른 게시글 썸네일만 추출되는 현상
3. Instagram 캐러셀은 lazy load 방식으로 모든 이미지가 한 번에 로드되지 않음

Instagram DOM 구조 분석

<article>
  <ul class="_acay">  <!-- 캐러셀 슬라이더 컨테이너 -->
    <li class="_acaz">  <!-- 각 슬라이드 -->
      <img src="https://scontent-...cdninstagram.com/...">
    </li>
    ...
  </ul>
</article>

<!-- "More posts from" 섹션 - ul._acay 외부에 있음 -->
<div>
  <img src="..."> <!-- 다른 게시글 썸네일 - 이것이 잘못 추출됨 -->
</div>

---

✅ 구현 내용

1. 캐러셀 이미지 추출 로직 개선

파일: src/services/scraper/platforms/instagram_scraper.py

extract_instagram_image_urls() 함수 재구현

• 변경 내용: ul._acay > li._acaz img[src*="cdninstagram.com"] 셀렉터로 변경
• 이유: 캐러셀 슬라이더 구조 내의 이미지만 정확히 추출

# 캐러셀 존재 여부 확인
has_carousel = await page.evaluate('''() => {
    return !!document.querySelector('ul._acay');
}''')

if has_carousel:
    image_urls = await self._extract_carousel_images()
else:
    # 단일 이미지 게시글 폴백
    image_urls = await page.evaluate('''() => {
        const article = document.querySelector('article');
        if (!article) return [];
        const mainImg = article.querySelector('div._aagv img[src*="cdninstagram.com"]');
        return mainImg && mainImg.src ? [mainImg.src] : [];
    }''')

2. 캐러셀 슬라이드 네비게이션 구현

_extract_carousel_images() 함수 신규 추가

• 변경 내용: Next 버튼을 클릭하며 모든 슬라이드의 이미지 수집
• 이유: Instagram은 캐러셀 이미지를 lazy load하므로 슬라이드를 넘기면서 수집 필요

특이사항:

• Playwright의 click() 대신 JavaScript btn.click() 직접 호출
• 프로필 이미지, 헤더 등이 Next 버튼을 가려서 Playwright click이 실패하는 문제 우회
• list + 별도 set으로 순서 유지하며 중복 제거

# JavaScript로 직접 Next 버튼 클릭 (가려진 요소 무시)
clicked = await page.evaluate('''() => {
    const btn = document.querySelector('button[aria-label="Next"]');
    if (btn) {
        btn.click();
        return true;
    }
    return false;
}''')

3. 작성자 프로필 이미지 별도 추출

extract_author_profile_image() 함수 신규 추가

• 변경 내용: 작성자 프로필 이미지를 author_profile_image_url 필드로 별도 반환
• 이유: 이슈 요청사항 - 프로필 이미지를 별도로 활용할 수 있도록

async def extract_author_profile_image(self) -> str | None:
    author_profile_url = await self.browser_controller.page.evaluate('''() => {
        const profileImg = document.querySelector('img[alt*="profile picture"]');
        return profileImg ? profileImg.src : null;
    }''')
    return author_profile_url

4. API 응답 필드 변경

변경 전:

{
  "profile_image_url": "..."
}

변경 후:

{
  "author_profile_image_url": "..."
}

• 이유: author 필드와의 연관성 명시, CLAUDE.md 네이밍 가이드라인 준수

---

🔧 주요 변경사항 상세

항목	변경 전	변경 후
이미지 셀렉터	._aagu, ._aagv (전역)	ul._acay > li._acaz (캐러셀 내부만)
이미지 수집 방식	단일 쿼리	슬라이드 네비게이션 + 순차 수집
클릭 방식	Playwright click	JavaScript click (가려진 요소 우회)
순서 유지	set (순서 없음)	list + set (순서 유지)
프로필 이미지 필드	profile_image_url	author_profile_image_url

---

🧪 테스트 및 검증

테스트 URL

https://www.instagram.com/p/DO-u-YwD6Rt

검증 결과

curl -X POST http://localhost:8001/api/test/scrape \
  -H "Content-Type: application/json" \
  -d '{"url": "https://www.instagram.com/p/DO-u-YwD6Rt"}'

• image_urls: 12개 추출 (게시글 순서대로)
• author: "jamsilism"
• author_profile_image_url: 정상 추출
• "More posts from" 썸네일: 제외됨

---

📌 참고사항

1. Breaking Change: API 응답 필드명 profile_image_url → author_profile_image_url로 변경
2. 슬라이드 대기 시간: 0.4초 (asyncio.sleep(0.4)) - 이미지 로드 대기
3. 캐러셀 인디케이터: div._acnb 개수로 전체 슬라이드 수 확인

---

📁 변경 파일

• src/services/scraper/platforms/instagram_scraper.py
  • extract_instagram_image_urls(): 캐러셀 기반 이미지 추출로 변경
  • _extract_carousel_images(): 신규 추가 - 슬라이드 네비게이션 로직
  • extract_author_profile_image(): 신규 추가 - 프로필 이미지 별도 추출
  • scrape_instagram_post(): 반환 필드명 변경

[Cassiiopeia]

Stable 적용완료 정상 처리 확인했습니다