안녕하세요. 엔지엠소프트웨업니다. 구글 크롬이나 마이크로소프트의 엣지에서 이미지 위에 마우스를 올리면 툴팁처럼 이미지를 설명하는 텍스트가 표시되는것들이 있습니다. 웹개발자라면 img의 alt 속성(Property) 또는 특성(Attribute)인걸 알고 있을겁니다. 그런데, [ https://unsplash.com ] 사이트는 이미지를 a tag로 한번 더 감싼 후 a tag의 title 속성을 이용하고 있습니다. 크게 어려운 내용은 아니지만~ 셀레니움이나 웹크롤링에 대한 이해가 없으면 약간 어려울수도 있습니다^^

 

이 테스트를 확인하기 위해 엔지엠 매크로를 실행하고 새로운 스크립트를 하나 추가해주세요.

 

 

웹 API의 [ 연결 ] 액션과 [ 텍스트 ] 액션 2개를 매크로 스크립트에 추가 해주세요.

 

 

연결 액션에 아래와 같이 속성들을 설정 하세요. 크롬 드라이버와 사이트 주소를 입력 해줍니다.

 

 

이제 중요한 부분이 텍스트인데요. 사이트의 구조를 먼저 파악해야 하기 때문에 크롬 개발자 도구(F12)를 실행한 후 이미지를 선택 해주세요.

 

 

크롬 개발자 도구에서 이미지를 선택하는 방법은 알고 계실거라 생각하지만~ 혹시 처음하시는 분들을 위해 잠깐 설명하자면, 아래 그림에서 엘리먼트 선택 도구를 클릭한 후 이미지로 마우스를 가져가면 위 그림처럼 이미지가 선택중이라고 알려줍니다. 여기서 클릭하면 해당 이미지 엘리먼트가 선택됩니다.

 

 

그런데, 이미지 엘리먼트를 보니 마우스를 올릴 때 표시해주는 속성인 alt가 없습니다. 이미지를 감싸고 있는 a tag의 title에 내용이 있을거라는건 쉽게 예측할 수 있습니다. 코드를 보면 아래 그림과 같이 a tag에 툴팁을 표시하는 타이틀(title) 속성이 있는걸 알 수 있습니다.

 

 

a tag에서 우클릭 후 Copy > Copy XPath를 선택하세요. 그러면, 해당 엘리먼트를 직접 찾아갈 수 있는 주소(XPath)가 클립보드에 복사됩니다.

 

 

위에서 XPath를 복사했기 때문에 아래 그림처럼 요소 형식을 XPath로 선택하고, 요소 이름에 클립보드에 복사되어 있는 주소를 붙여넣기 하세요.

 

 

그리고, 엘리먼트 정보 옵션은 Attribute로 설정합니다. Property로 해도 동일할겁니다. 그런데, 일부 브라우저 또는 버전에서 Property를 인식하지 못하는 문제가 있어요. 안정적으로 데이타를 추출하려면 Attribute를 사용하는게 좋습니다. 마지막으로 추출 옵션에 title을 적어주세요. 이제 매크로를 실행 해볼까요? 여러분들도 아래 그림처럼 이미지의 타이틀(Title, Alt) 텍스트를 가져왔을겁니다.

 

 

이렇게 간단하게 이미지의 특성을 원하는데로 모두 추출할 수 있습니다. 좀 더 고차원적인 업무에 활용하려면 [ 엘리먼트 목록 ] 액션을 이용해서 모든 a tag 엘리먼트들을 가져와서 반복하면서 텍스트를 비교하거나 이미지 주소를 비교해서 어떤 조건에 맞는 처리를 할수도 있습니다. 엔지엠소프트웨어 홈페이지의 매뉴얼 > [ 팁 앤 테크 게시판 ]을 보시면 웹 관련된 예제들이 많이 있습니다. 하나씩 읽어보면서 학습하다보면 웹크롤링 업무는 쉽게 만들 수 있을겁니다^^

[ 업무 자동화 RPA 매크로 제작 및 견젹 문의 ]

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0