안녕하세요. 엔지엠소프트웨어입니다. 고객분 질문을 토대로 가이드를 작성합니다. 질문 내용은 네이버 카페에서 카페 정보에 있는 관리자의 이름을 추출할 수 있는지 물어본건데요. 이와 관련된 도움말이 있지만, 초보자가 도움말을 보고 따라하기에 부족한 내용이라서 좀 더 자세하게 작성해보려고 합니다. 우선, 엔지엠 매크로 에디터를 실행하고 새로운 스크립트를 하나 추가하세요.

 

 

가장 좋은 방법은 이미 실행중인 웹브라우저에 붙어서 작업하는거예요. 하지만, 간단하게 목적만 달성하기 위해 기타 자잘한 설정은 건너뛰도록 하겠습니다. 만약, 좀 더 멋진 매크로를 만들고 싶다면 아래 글을 참고하셔서 크롬 웹브라우저를 동기화해서 실행 상태에서도 동작할 수 있도록 해주는게 좋습니다.

[ 현재 실행중인 크롬 브라우저에서 엔지엠 매크로의 웹 API 사용하는 방법 ]

 

웹 API의 연결 액션을 스크립트에 추가 해줍니다. 아래 화살표를 참고해서 웹 API의 연결 액션을 추가해야 합니다. 사실, 웹 API를 추가하라고만 하면 도움말을 찾아보고 스스로 잘 하는 사람이 있는 반면 대부분은 어디에 어떤게 있고, 어떤 순서로 해야 하는지 친절하게 알려줘야 따라할 수 있는 사람도 있습니다. 처음엔 모두가 그렇습니다. 저도 영어를 처음 배울 때나 프로그래밍 코딩을 처음 배울 때 그랬으니까요.

 

이해력이나 응용력이 출중하지 않은 보통 사람이라면 모두가 그럴겁니다. 저역시도 프로그램 개발을 포기해야 하나 할 정도로 처음엔 코드 한줄 작성하기가 정말 어려웠거든요. 하지만, 이런 힘든 시기를 잘 견뎌내면 한단계 성장하는 자신을 만날 수 있을겁니다. 처음 접하는 모든 것들이 러닝커브가 존재합니다. 이런 역경을 해쳐나가야 발전할 수 있는거겠죠?

 

이렇게 한땀한땀 캡쳐하고, 화살표 그려넣고 번호까지 달면서 세세하게 적는다고 해도 항상 누락되거나 건너뛰는 설명들이 생기기 마련입니다. 왜 이런일이 발생하는지는 모르겠지만, 당연하다고 생각하고 넘어가는 것들이 많아서 그런거 같아요. 그래서, 자신이 배우면서 작성하는 글들이 더 좋은 글이 될 가능성이 높습니다. 이미 다 깨우친 다음에 글을 작성하면 디테일에서 떨어질 수 밖에 없을거 같습니다.

 

웹 API 연결은 웹브라우저를 실행하고, 매크로가 동작할 사이트에 접속할 수 있게 해줍니다. 이름에서 알 수 있듯이 웹 API를 이용해서 웹사이트(쿠팡, 구글, 네이버, 카페, 블로그등등...)에 연결하는 기능을 담고 있습니다. 한글로 적혀 있지만 외계어처럼 들릴수도 있습니다. 이건 당연한 겁니다. 저도 회계나 법? 의료? 이런 용어들은 한국어로 말하지만 거의 못알아 듣기 때문입니다. 결국은 시간을 들여서 익숙해지는 방법밖에 없을듯 합니다.

 

웹 API는 에디터 기준 우측에 외부 API에 있습니다. 외부 API를 보이게 하려면 우측 하단에 탭을 클릭해야 합니다. 탭이란 우리가 익숙하게 사용하는 크롬이나 엣지 웹브라우저에서 힌트를 얻을 수 있습니다. 크롬 웹브라우저 위에 보면 내가 방문한 사이트가 탭으로 여러개 실행되는걸 볼 수 있습니다. 엔지엠 매크로의 에디터도 한정된 공간에 많은 내용을 담기 위해서 좌측과 우측 그리고, 하단에 카테고리별로 구분된 창들이 탭으로 정렬되어 있습니다.

 

카테고리란 유사한 기능 또는 함수(Function)등등... 어떤 목적에 따라서 분류된 명칭입니다. 이런것들은 도서관에 가면 일상 생활에서 흔히 접할 수 있는 용어이긴 한데요. 일상 생활에서 사용하는 용어가 아니다보니 개발자 입장에서 설명할 때 잘 못알아 듣는 분들이 많더라고요. 아래 에디터를 보면 액션들을 담고 있는 상위 그룹들이 카테고리별로 분류되어 있다는걸 알 수 있을겁니다.

 

이제 기본적인 부분들은 설명을 다 한거 같으니 천천히 이해하려고 노력하면서 기본 개념들을 잡으시면 좋겠네요. 1번 화살표가 가리키는 곳을 유심히 잘 살펴보면 외부 API라는 탭이 보일겁니다. 공간이 작아서 전체 텍스트가 표시되지 않습니다. 이 설명 아래에 탭의 텍스트가 전부 보이도록 하는 방법을 추가해서 적어놓을께요. 너무 걱정하지 마시고, 천천히 마음에 여유를 가지고 글을 읽어보세요.

 

2번 화살표를 따라가면 웹 API라는 카테고리가 있습니다. 카테고리를 확장하면(확장하려면 오른쪽을 가리키고 있는 화살표를 클릭하세요.) 연결 액션이 보입니다. 연결 액션을 클릭하고 스크립트쪽으로 드래그하면 스크립트에 액션이 추가됩니다. 또는 더블 클릭해도 스크립트에 추가할 수 있습니다.

 

 

아무래도 윈도우 화면을 제어하는 매크로 프로그램이다보니 전체 화면으로 매크로를 제작하기에 불편한점이 많습니다. 그래서, 창을 가급적이면 작게 만들어야 윈도우 화면을 넓게 쓸 수 있는데요. 이런 문제를 해결하기 위해서 각각의 기능들을 모아놓은 탭들을 한곳에 모아두었습니다. 이런 UX(User eXperience: 사용자 경험)는 이미 수십년전부터 이어져 오는 아주 유명한 디자인입니다. 그렇지만, 개발자들에게나 유명하지 일반인분들은 이런 UI/UX가 익숙하지 않을겁니다. 개발자들은 수백에서 수천가지의 라이브러리를 조합해서 개발하다보니 작은 화면에 많은 것들을 집어 넣는게 유리합니다. 그래서, 보통 말하는 통합 개발 도구(IDE: Integrated Development Environment)들이 이와 유사한 UX를 가집니다.

 

아래 그림을 참고하셔서 각각의 구역을 나누는 스플릿바를 클릭하고 좌우로 이동 해보세요. 창의 크기를 사용자가 임의로 조절할 수 있습니다. 참고로, 외부 API와 중앙 스크립트 영역을 구분하는 스플릿바뿐만 아니라 좌측의 도구 상자도 좌우로 크기를 조절할 수 있습니다. 그리고, 하단 영역도 조절 가능합니다.

 

 

이외에도 창을 때서 별도로 확인할수도 있습니다. 탭 그룹의 제목 표시줄을 마우스로 클릭하고 드래그하면 매인 에디터에서 떨어져 나옵니다.

 

 

떨어져 나온 창을 다시 에디터로 붙이려면 창 제목 표시줄을 클릭 드래그해서 에디터로 가져가 보세요. 가이드 라인이 표시되고 어디에 붙일지 사용자가 선택할 수 있습니다. 여기서, 선택이란 의미는 에디터가 "어디에 붙일까요?"라고 물어본다는 의미는 아닙니다. 가이드 영역이 표시되고 사용자가 해당 위치에서 마우스 드래그를 드랍해야 붙습니다. 드래그 드랍은 클릭 후 이동한 다음에 마우스늘 놓는 행위를 의미합니다.

 

아래 그림과 같이 웹 API의 연결 액션의 속성탭을 클릭하세요. 아래 그림을 잘 보면 화살표가 가리키는 곳이 있는데요. 거기를 클릭하면 됩니다. 만약, 잘 모르겠다면 위에서 설명한것처럼 스플릿바를 마우스로 드래그해서 영역을 넓혀보세요. 속성이라는 한글이 보일겁니다.

 

 

아래 그림을 참고하여 1번 화살표의 속성 값을 True로 변경하세요. 이 속성의 이름은 웹드라이버 설치입니다. 웹사이트 주소는 접속하고 싶은 사이트의 주소입니다. 이 예제 글에서는 네이버 카페에 접속할건데요. 2번 속성에 아래 주소를 입력 해보세요. 테스트용 카페이기 때문에 가입하지 마세요. 예제를 작성하기 위해 참고한 카페입니다.

• https://cafe.naver.com/gogogo1313

 

 

이 카페에서 가져올 내용은 포토남이라는 글자입니다.

 

 

저 내용을 확인하려면 HTML 소스를 먼저 분석해야 합니다. HTML이란 HyperText Markup Language의 약자로 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 콘텐츠는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수도 있습니다. HTML은 콘텐츠의 구조를 정의하는 마크업 언어 입니다. HTML은 콘텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게 하거나 특정한 방식으로 동작하도록 하는 일련의 요소(Element)로 이루어져 있습니다. 태그로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다.

 

HTML에 대해서만 알아보더라도 몇시간을 설명해야 하지만, 여기에서 HTML 강의를 하는건 아니기 때문에 간략하게 개념만 잡고 넘어가도록 하겠습니다. 웹 API를 공부하기에 앞서 기본적인 웹이라는 공간을 이해하고, 어느정도 코드를 볼 수 있어야 제대로 업무 자동화 프로그램을 만들 수 있습니다. 그리고, 고난이도의 매크로를 제작하려면 클라이언트와 서버의 개념과 통신에 대한 내용까지 포괄적으로 이해하고 깊이있게 학습해야 합니다. 이런 부분들을 이해하지 못하고, 따라하기식으로 코딩한다면 아무리 머리가 좋은 천재라도 응용해서 뭔가를 만들수는 없습니다.

 

이제 대략적인 웹에 대한 설명이 끝났기 때문에 웹 API의 연결 액션으로 네이버 카페까지 접속은 되었을겁니다. 그렇다면 추출하고자 하는 정보를 어떻게 가져올것인가를 고민해야 하는데요. 앞서 설명한 HTML을 어느정도 분석해야 가능합니다. 가져올 텍스트를 F12로 찍어보겠습니다. 위의 네이버 카페에서 F12를 눌러서 개발자 도구를 실행 해줍니다. 그리고, 1번 화살표의 시작 지점을 클릭하고 가져올 텍스트로 마우스를 이동한 후 클릭하세요.

 

 

저 점선으로 된 사각형 안에 대각선을 가리키는 화살표 아이콘의 이름은 Select an element in the page to inspect it입니다. 보통 셀렉터라고 부릅니다. 앞으로도 이렇게 줄여서 부를거예요. 꼭 외워둬야 합니다. F12 눌러서 열리는 창의 이름은 개발자 도구입니다. 이것도 외워둬야 합니다.

 

셀렉터로 가리킨 텍스트의 엘리먼트는 아래 위치네요. 하이퍼 링크 태그인 a 태그인데요. 저 안에 원하는 텍스트가 있습니다. 

 

 

여기에서 테스트를 다시 하지는 않을겁니다. 이 내용을 질문하신 고객분은 여러가지 방법을 다 해보고, 엔지엠소프트웨어의 여러가지 도움말을 참고해서 해봤는데도 문제를 해결하지 못해서 좀 더 자세하게 내용을 작성하는 내용입니다. 아마도, 오래전에 작성한 내용이라서 약간 응용을 해서 문제를 해결해야 하는데 개발자가 아닌데다가 매크로에 대한 개념조차 없기 때문에 응용이 힘들겁니다. 개발자라고 하더라도 자동화 관련 지식이 없으면 힘든 내용이긴 합니다.

 

우선, 요즘 만들어지는 웹 환경은 SPA로 대부분 만들고 있습니다. 그리고, Ajax 기술을 활용하기 때문에 iframe와 같은 기술을 사용하지 않는 추세인데요. SPA는 Single Page Application의 약자입니다. 페이지 하나로 Ajax 비동기 업데이트를 구현합니다. 하지만, 네이버 카페는 만들어진지 오래되었고 옛날에 사용하던 기술인 iframe를 사용하고 있습니다. 물론, 필요에 의해서 사용하기도 하는 기술이긴 합니다. 한 때는 퇴출 위기에 몰렸던적도 있지만, 다시 부활하고 있는거 같더라고요. 업계 동향은 돌고 돌기 때문에 보안상 문제가 되지 않는다면 복고로 돌아가기도 합니다.

 

아무튼, 일반적으로는 위에서 선택한 엘리먼트(Element: 요소)를 텍스트 가져오기로 사용하면 해당 내용을 잘 읽어와야 합니다. 그렇지만, 이 내용을 작성하는 이유는 일반적인 환경이 아니라는 의미이고 텍스트를 가져올 수 없다는 뜻입니다. 그렇다면 한가지 예상해볼 수 있는건 이 엘리먼트가 iframe안에 담겨 있을거라는 예상을 해볼 수 있습니다. 물론, 일반인이 예상하기란 불가능하고, 개발자는 쉽게 유추할 수 있습니다. 그러면, 진짜 그런것인지 검증을 해봐야겠죠?

 

네이버 카페에서 F12를 누르고 찾기(Alt+F)로 iframe를 찾아볼께요. 음~ 생각보다 정말 많은 iframe이 쓰여지고 있는걸 확인할 수 있습니다. 앞서 말했듯이 엘리먼트는 iframe 안에 있다고 했습니다. 그렇다면, 하이어라키 구조를 가지는 HTML 특성상 랜더링된 소스의 상위로 이동하다보면 내가 혹산 iframe를 찾을 수 있습니다.

 

 

이런 디테일한 부분들을 글로 설명하기란 정말 한계가 많습니다. 그래서, 유튜브가 흥한거겠죠? 집에 마이크도 없고 동영상 관련 장비가 없다보니 오로지 글로만 설명을 해야 해서 가끔 난감한 경우들이 발생합니다. 좀 더 쉽게 설명할 수 있는 것들도 몇시간을 들여서 글을 작성해야 하니까요. 올해안에 차세대 인공지능 엔지엠 매크로 7 제작이 완료되면 내년부터는 좀 더 유튜브를 활용해서 가이드를 작성해야 할거 같아요.

 

차세대 인공지능 매크로를 만드는게 우선이 되다보니 도움말을 만드는데 시간을 많이 쓸수 없지만, 비슷한 내용을 차세대 매크로에서 구현하면서 같이 비슷한 내용들은 통합해서 설명하면 좋을거 같네요. 시간도 절약하고 해당 기능도 만들어보면서 개선 사항도 찾고 하면 많은 리소스를 세이브할 수 있을거 같습니다. 시간이 곧 돈이니까요. 정말 하루하루가 시간이 모자르게 흘러가네요.

 

텍스트를 가져올 엘리먼트가 속한 iframe을 찾으려면 해당 엘리먼스에서 마우스를 위로 스크롤하면서 iframe가 나올 때까지 천천히 봐야 합니다. 아래와 같이 iframe 정보를 확인할 수 있었습니다. 이 iframe를 식별할 수 있는 정보는 id가 있네요. 물론, name을 사용해도 되지만 HTML의 디자인에 따르면 id를 사용하는게 좋습니다. 왜냐하면 name은 페이지에서 유니크하지 않기 때문입니다. 웹페이지를 개발할 때 name과 id를 같이 사용하지는 않지만, 구조적인 문제를 해결할 때 유용하게 사용할 수 있기도 합니다. 아무튼, 우리가 필요한 정보는 cafe_main이라는 아이디입니다.

 

 

iframe도 하나의 페이지입니다. 그래서, 네이버 카페는 여러개의 iframe 페이지들을 하나로 합쳐서 보여주는 컨테이너와 같은 역할을 한다는걸 알 수 있습니다. 이런 구조가 파악이 되면 문제를 해결하는데 많은 도움이 됩니다. 개발자들이 흔히 사용하는 구조, 디자인, 아키텍텨등등은 건설에서 사용하는 의미와 유사합니다. 대형 건물에 화재가 발생했다고 생각 해보세요. 소방대원이 가장 먼저 하는 일이 뭘까요? 사람을 구출하기 위해서는 건물의 구조를 알아내야 합니다. 그래서, 영화 같은것을 보면 불난 건물의 도면을 가져와서 사람들이 있을만한 곳을 유추한 후 진입합니다.

 

프로그램을 분석하는것도 비슷합니다. 사이트의 구조를 알면 어떤 문제가 발생했을 때 원인을 찾아서 해결하는데 매우 큰 도움을 받을 수 있습니다. 이처럼, 네이버 카페의 구조를 먼저 분석하는게 우선입니다. 우리는 원하는 정보를 가진 엘리먼트가 어느 위치에 있는지를 이제 알게 되었으니 해당 값을 가져오기 위한 문제를 풀어야만 합니다. 이 문제를 해결하는 방법은 다양한 도움말에서 설명하고 있습니다. 물론, 응용해서 풀어야 합니다.

 

아래 그림과 같이 브라우저 컨트롤 액션을 텍스트 액션 위에 추가 해줍니다. 브라우저 컨트롤 액션은 정말 많은 기능을 포함하고 있어서 이 액션 하나를 익히는데도 정말 많은 시간이 걸릴겁니다. 하지만, 몇번 사용 해보면서 개념을 이해할 수 있다면 이 모든 것들이 머리속에 그려지면서 안개가 걷히는 듯한 느낌을 받을겁니다. 여기까지 오기가 힘들고 어렵겠지만요. 하지만, 이런 일은 대부분 일어나지 않습니다. 대부분은 본연의 직업이 있고, 매크로는 어느정도 취미의 영역이기 때문입니다. 여기에 많은 시간을 할애하기는 쉽지 않습니다. 현실적으로요^^; 

 

 

브라우저 컨트롤 액션을 선택하고, 속성창을 클릭합니다. 아래 그림과 같이 iframe을 타겟팅 하기 위한 설정을 해보세요. 위에서 유니크한 아이디를 알아냈기 때문에 이걸 사용하면 될거 같아요. 그래서, 아래 그림에서도 iframe의 아이디를 사용한다고 하고, 소스에서 찾은 cafe_main으로 설정했습니다.

 

 

이제 거의 다 문제를 해결했습니다. 마지막으로 개발자 도구에서 셀렉터로 원하는 데이터가 있는 엘리먼트를 클릭한 후 우클릭해서 Xpath 값을 가져와서 아래와 같이 붙여넣기 하세요.

 

 

이 내용으로 몇시간을 테스트 해보고 있는데 문제를 해결하기가 쉽지 않았습니다. 도대체 문제가 뭘까를 한참 고민하다가 어쩔 수 없이 내부 코드를 처음부터 다시 살펴보기로 했는데요. 내부 코드를 하나씩 살펴보다보니 프레임 내부로 이동하는건 정상이었습니다. 해당 핸들 값도 존재하고 있었어요. 그런데도 Xpath가 적용되지 않길래 구조를 다시 살펴보니 매인 내의 iframe 노드를 타고 들어가는걸 확인 했습니다. 아마도, 이전에는 이런식으로 접근해도 정상 동작했던거 같은데... 너무 오래전에 테스트 해본거라 확실하지는 않습니다.

 

자 그러면, 실마리는 찾은셈이군요. iframe 내부로 정상적으로 진입했기 때문에 Xpath가 문제인듯 합니다. 그러면, Xpath가 아닌 다른 방법을 사용하면 될거 같아요. 그래서, 엘리먼트 정보를 다시 확인해보고 쓸만한 내용이 뭐가 있을지 확인해봅시다. 다행스럽게도 해당 위치 정보에는 클래스가 있습니다. m-tcol-c를 이용하면 될거 같네요.

 

 

아래 그림과 같이 설정하고 매크로를 실행 해보세요.

 

 

오~ 정상적으로 데이터를 가져왔습니다. 거의 4시간에 걸쳐서 문제를 해결했네요.

 

 

개발자인 저도 분석하는데 오래 걸렸습니다. 물론, 자주 사용하는 기술이 아니다보니 처음부터 다시 기억을 더듬어서 하나씩 검증해야 했어요. 일반인이라면 이 문제를 해결하기가 쉽지 않았을거라는 생각이 듭니다. 이 글에서 정말 다양한 방법과 설명을 담고 있으니 이제부터는 다양한 방식으로 엘리먼트를 찾는 방법을 터득할 수 있을겁니다. Xpath가 언제부터 네이버 카페에서 안되었는지는 확실하진 않지만, 다양한 방식으로 응용해서 값을 추출해야 할거 같습니다.

 

Xpath를 사용하는게 가장 쉬운 방법이지만, 이 기능을 사용할 수 없게 막았다면 다른 방식으로 처리해야 합니다.

 

이 글이 도움이 되셨다면~ 커피 한잔이라도 후원 부탁드립니다^^

개발자에게 후원하기

 

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

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

감사합니다~

추천0 비추천0