Louis is

8월을 눈앞에 둔 지금, 상반기에 대한 정리가 필요한 시점이라고 생각했다.( 나는 '늦었다고 생각할 때가 가장 빠른 때다'라는 말을 굳게 믿는다...😇)

2월에 개발자 퍼스널 브랜딩 워크숍을 통해 작성한 2023년 버킷리스트를 5개월 만에 다시 보면서 스스로 회고의 시간을 가졌다.

2023년 목표

상세한 내용은 https://j-louis.tistory.com/11를 참고하기 바란다.

위에 작성했던 항목들을 하나씩 살펴보았다.

1) 주 1회 블로그 글쓰기

3월을 시작으로 지금까지 5번 글을 작성했다. 

글쓰기 모임도 했는데 모임의 목표가 2주에 1번 글쓰기가 되다 보니 개인적인 목표는 달성하지 못했다.

최근엔 이직 준비, 바쁜 업무에 소홀 했지만 다시 시작해보려 한다.

2) 프론트엔드 (플러터) 학습

상반기에는 업무영역 외 다른 영역의 학습을 진행하지 못하였다.

하반기에는 꼭 학습과 작은 결과물을 만들어내는 시간을 가져볼 계획이다.

3) 사이드 프로젝트 진행

계획과는 다른 방향으로 진행되었다. 계획을 작성하는 시점에는 가계부를 만들어보려고 했다가 실제로 사이드 프로젝트를 시작할 당시에는 맛집 공유지도 서비스를 만들려고 했다. 하지만 잘 모르는 도메인을, 제대로된 기획도 없이 하려다보니 진행이 더뎠고, 흥미가 생기지 않아 중간에 그만하게 되었다. 지금 생각해 보면 너무 방대했다.
이렇게 빈손으로 끝날뻔한 사이드 프로젝트는 상품권 번호 자동입력기(내가 필요로 했던 기능기능)를구현하면서 다행히 유의미한 결과를 얻을 수 있었다. 파이썬을 이용해서 만든 이 프로그램은 몇몇 지인들에게도 전달했고 조금씩 기능을 추가하면서 아주 잘쓰고 있다.
이후 다른 사이드 프로젝트를 진행하게 된다면 내게 필요한 것, 아주 작은 하나의 기능을 구현하는 것으로 시작하면 되겠구나 느꼈다.

하반기에는 플러터 학습과 함께 무엇인가를 만들어볼 생각이다.

4) linkedin 활동 & 이력 update

Linkedin 활동은 지금보면 매우 추상적인 목표였던 것 같다.

하반기에는 내가 작성한 글을 링크드인에도 공유하는 것을 목표로 action을 해볼 계획이다.
이력서 update는 잘 진행했다. 나만의 포맷으로 새롭게 정리했다.

나름 프로젝트를 정리했다고 생각했는데 이것도 지나보니 수정이 필요해 보이더라.

3분기가 끝나는 시점에 다시한번 update 해볼 계획이다.

5) 기술서적 한 달에 한 권 이상 읽기 & 블로그 정리.

책은 꾸준히 읽었지만 정리하는 게 어려웠다. 

하반기에는 서적에 국한하지 않고 내가 학습 전체(책, 강의, 블로깅 등)로 범위를 넓히고 기억을 위한 정리도 꼭 진행하려고 한다.

6) 영어 공부와 회화 학원

상반기에 진행하지 못했다. 구체적인 계획과 목표가 없기 때문인 것 같다.

항상 필요성은 느끼고 있지만 다른 것들(업무, 개발학습, 취미 등)에 밀려 우선순위가 낮아졌다.

올해가 가기 전에 시작은 해보고 싶다.

총평

목표에 대해 전체적으로 체크하는 타이밍이 조금 늦었구나 생각했다.

계획대로 진행된 것도 있는 반면에 아예 시작도 못한것도 있고, 방향성이 달라진 것도 있었다. 왜 이런 목표를 잡았을까 싶은 것도 있었다. 

지금이라도 체크를 하고 있으니 다행이라 생각하기로 했다.

상반기엔 목표한 것들을 많이 달성하지 못했지만 이미 지나간 시간에 대한 후회는 그만하고, 하반기는 달성 가능한 좀 더 구체적인 목표를 계획 해 보았다. 

2023년 하반기 목표

몇 가지 목표에 대해 첨언을 하자면

사이드 프로젝트는 플러터를 기반으로 내가 쓸 app을 만드는 것이 목표이다.
기술 역량 향상은 업무와 관련된 영역(Redis, spring batch, msa 등)을 주로 진행할 계획이다. 그리고 업무에 적용해 본 사례까지 글로 기록하는 것이 목표이다.

마무리

지금과 같은 중간 회고 없이 2023년 하반기를 보냈다면 결과가 지금과 크게 달라지지 않았을 것 같다. 

늦은 감이 있지만 회고를 통해서 상반기를 돌이켜 볼 수 있었고 하반기를 계획할 수 있었다. 

최대한 달성할 수 있는 목표들로 계획하고 수정한 만큼 다음 회고 때는 좀 더 나은 결과를 보여주고 싶다. 

최근 상품권을 대량으로 구매해서 등록해야하는 경우가 있었다. 

여러 개(보통 5만 원권 40개)를 구매해서 pin번호를 하나하나 입력하다 보니 여간 귀찮은 일이 아니었다.
(중간에 가상키보드로 입력해야 하는 영역도 있음… ㅡ.ㅡ) 

몇개 입력하다가 그만두고 검색을 해봤다. ‘상품권 번호 자동입력’이라고 하니까 나오더라 (역시.. )

하지만 public 하게 배포되는 프로그램(https://auto.ddart.net/xe/help/239)은 Windows 용이라서 사용할 수 없었고 Mac용으로 찾다가 결국 그냥 내가 만들어보자 라는 결심을 하게 되었다.

설계한 프로세스는 간단했다.

1. 웹페이지(충전 페이지)를 크롤링.
2. Input 영역(번호입력칸)에 value(번호) 입력.
3. action (충전 버튼 클릭)
4. 1~3 반복

해본 적은 없었지만 python과 selenium을 이용하면 구현이 가능해 보였다.

개발기

여러 블로그를 참고했고 작은 step으로 쪼개서 개발을 진행했다.

Step1

필요한 라이브러리가 뭔지 확인하고 환경을 세팅했다.

Selenium version은 4.9.1 - default가 최신이라 선택.

Python version은 3.11 - 3.9를 사용하다가 호환성 문제로 최신버전으로 upgrade.

Chromedriver(브라우저를 handling 하는 용도) version은 113 - 내 pc에서 사용 중인 chrome버전에 맞는 것을 선택.

Step2

브라우저에 페이지를 띄워보는 것으로 시작했다.

브라우저를 띄우기 위해선 사용하는 브라우저 드라이버를 설치해야 했다.

익숙한 Chrome을 선택했고 현재 pc에서 사용 중인 버전에 맞는 driver를 설치했다. 

그 후 아래와 같은 로직을 작성해서 페이지를띄울 수 있었다.

Step3

번호 입력 기능을 만들기 전, 우선 ID, PW를 입력받아 로그인 성공까지 처리하는 프로세스를 개발해 보았다. 

하지만, 입력하고 로그인 버튼을 눌렀는데 되지 않았다. 

알고 보니 패스워드 부분은 가상키보드를 이용한 입력이 필요했다. (가볍게연습해보려고했는데… 따흑…)

다행히 javascript 속성을 이용해서 처리하는 방법으로 금방 해결할 수 있었다.

Img의 alt 속성과 입력문자를 매핑시키는 방식으로 작업한 코드는 아래와 같다.

특수문자 입력 때문에 예외처리 로직도 추가했다.

정상적으로 동작하는 것을 확인할 수 있었다.

Step4

다음으로 번호입력 프로세스 개발을 진행했다.

로그인을 구현했으니 금방 될 줄 알았는데... 이슈가 나왔다.(쉽게 되면 재미없지 그래...)

가상키보드 alt 속성과 입력값 매핑 규칙이 번호입력 키보드에선 적용이 되지 않았다.

첫 번째 가상키보드에서 2는 alt = 3과 3은 alt = 4와 매핑이 된다.
하지만 두 번째 가상키보드에서는 2는 alt = 2과 3은 alt = 3과 매핑이 된다. 
키 위치가 계속 변하고 alt 값도 고정되지 않다 보니 매핑기준을 찾을 수 없었다. 

OCR 라이브러리 도입방법까지 찾아보았지만 가볍지 않은 느낌이라 PASS 했다.

여러 삽질(?) 끝에 당장의 해결책을 찾았을 수 있었는데 MoblieWeb 화면에서는 숫자와 alt값을 동일하게 사용할 수 있었다.

Step5

한 개의 상품권 번호 입력을 성공했으니 여러 개 상품권번호 입력은 반복문을 이용해서 구현만 하면 끝이라고 생각했다. 근데….

(역시나?) 첫 번째 상품권 입력 후 두 번째 상품권의 번호를 입력할오류가 발생했다.

다시 한번 가상키보드 입력값 처리 함수에서 원인을 찾아 보았다.

Line1: xPath를 이용해서 target을 alt값으로 가지는 element를 찾는다.

Line2~3: 해당 element의 부모의 부모(조부모) element에서 click event 처리를 한다.

먼저 element의 innerHtml을 출력했다.

출력 결과를 보니 두 번째 번호 입력할 때 element를 잘못 찾고 있었다.

활성화되지 않은 첫 번째 가상키보드를 선택해서 에러가 발생한 것으로 보였다.

그래서 우선 활성화된 가상키보드의 div 영역을 명시해서 찾고, 그 내부에 있는 alt값으로 매핑처리 하도록 수정했다. 

하지만 이 코드 또한 동일하게 오류가 발생했다. 😭😭

결과적으로 찾아낸 원인은 xPath 문법 오류 였다.

나는 '//'가 현재 node를 기준으로 matching 되는 것을 찾는 걸로 이해했는데 그게 아니었다.

내가 작성한 로직에서 "//img [@alt='{}']" 부분이 전체 document에서 일치하는 node를 찾다 보니 계속 첫 번째 가상키보드를 찾았던 것이다.

func_nn = func_p.find_element(By.XPATH, ".//img[@alt='{}']".format(target))

수정하고 나니 원하는 대로 잘 동작하는 것을 확인할 수 있었다. 

마무리

역시 목마른 사람이 우물을 파는구나 싶었다. 필요하니 만들게 되더라.

오랜만에 업무 말고 다른 개발을 하면서 refresh 되는 느낌을 받았다.

간단하게 생각했던 것에서 장애물들이 계속 나와 처음엔 당황스러웠지만 나중엔 오기가 생겼고 게임에서 미션 깨는 느낌으로 재밌게 만들었다.

파이썬을 잘 활용하면 여러 곳에서 활용할 만한 서비스를 만들어볼 수 있겠다고 몸소 느낄 수 있었다.

다음엔 어떤 우물을 파볼까~

참고 블로그

https://kookhh0827.tistory.com/entry/Development-%EC%BB%AC%EC%B3%90%EB%9E%9C%EB%93%9C-%ED%95%80%EB%B2%88%ED%98%B8-%EC%9E%90%EB%8F%99-%EB%8C%80%EB%9F%89-%EB%93%B1%EB%A1%9D%EA%B8%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0

https://www.softwaretestinghelp.com/selenium-python-tutorial/

들어가며

Chat GPT는 2022년 12월에 OpenAI에서 출시된 이후 지금까지 꾸준히 핫한 키워드인 것 같다.

다들 알겠지만 Chat GPT에 대해 간단히 설명하면 아래와 같다.
(GPT에게 "너에 대해 설명해 줘"라고 물어봐서 얻은 답변)

저는 ChatGPT라고 하며, 인공지능 기술인 GPT-3.5 모델을 기반으로 한 대화형 챗봇입니다. 사람들이 자연어로 질문하면 가능한한 정확하고 유용한 답변을 제공하는 것이 제 목적입니다. 이를 위해 저는 최신 정보와 데이터를 학습하여 사람들에게 도움을 드리고 있습니다. 제가 가진 지식은 2021년 이전부터 2021년까지의 데이터를 바탕으로 학습되었지만, 저는 지속적으로 학습을 하고 있기 때문에, 미래에는 2022년 이후의 데이터도 포함될 수 있습니다.

그리고 유료버전은 GPT 4.0을 기반으로 한다고 한다. 좀 더 자세한 내용은 인간지능으로 작성된 나무위키 <Chat GPT> 를 참조하면 좋을 것 같다.

서론

먼저, 이 글은 다양한 Chat GPT를 활용법을 설명하는 글이 아니다.

본인은 아직 구글링이 익숙한 평범한 개발자이고 GPT로는 초기에 단순한 호기심으로 몇 개 질문해 본 게 전부인 사람이다. 

업무에서 Chat GPT를 사용해 보고 인상 깊은 점들이 몇 가지 있어 그 경험과 생각을 공유해보고자 한다.

본론

1. 발단

최근 ktLint를 이용한 코딩 컨벤션을 프로젝트에 적용하는 작업(https://j-louis.tistory.com/14)을 진행중 구글링에 한계를 느꼈다.  

Ktlinst 플러그인에 대한 개념과 이를 활용해서 컨벤션을 적용한 예시와 방법은 알 수 있었지만, 대부분 매우 간단한 튜토리얼 정도 였고 서비스에 적용하기엔 약간 부족했다. 그리고 대부분 영어로 된 많은 정보들을 계속 보다 보니 조금씩 헷갈리게 하더라. (ㅠ.ㅠ)

좀 더 상세한 활용, 그리고 서비스에 어떻게 적용하는 게 좋을지 고민해다가 Chat GPT한테 물어보기로 했다.

2. 전개

처음 질문은 이렇게 시작했다.

그러니 GPT는 ci 설정파일 생성법 & ktlintCheck 적용까지 상세하게 설명해 주더라. 친절했다..! 

이 내용을 바탕으로 build 시점에 컨벤션 체크 방식으로 작업을 하였지만, 아래와 같은 이유로 다른 방식을 고민하게 되었다.

Push 이전에 체크 할 수 있는 게 있는지 다시 물어봤다. 

(지금 생각해보면 pre-push 관련 내용을 설명해 줘야 되지 않았나 싶긴 한데...) pre-commit 관련 내용을 설명해 주었다.
pre-push도 있는지 물어보았고 관련 예제 스크립트 알아서 작성해 주었다.

스크립트 내용도 내가 원하는 방식으로 수정도 요청할 수 있었기 때문에 문법에 대한 스트레스를 줄일 수 있었다.

        1. 특정 브랜치가 아니라 모든 브랜치에서 검사할 수 있게 스크립트 수정 요청.

        2. ktlint를 시스템 설치해서 사용하는 게 아니라 gradle 라이브러리 적용한 명령어로 수정 요청.

하지만 이 방식도 도중에 아래의 이유로 다른 방법을 생각해야 했다.

결국 commit 시점에 컨벤션 체크 하는 방식을 선택했고 다시 한번 gpt한테 도움을 요청했다.

스크립트 작성 & 스크립트 실행 권한 수정까지 섬세하게 알려준다는 느낌을 받았다.
물론 ./gradlew addKtlintCheckGitPreCommitHook    명령어를 이용해서 기본 스크립트를 이용할 수 있었지만 GPT가 작성해 준 script가 훨씬 도움이 되었다.(프로젝트 환경에 맞게 여러 번 수정해서 물어봐야 하는 게 약간 귀찮긴 했음)

그리고 작업 중 궁금한 사항들에 대해서도 답을 얻을 수 있어서 매우 편리했다. (다른 레퍼런스를 활용해서 했었다면 귀차니즘 때문에 지나쳤을 것 같은 질문들이다.)

3. 위기

중간에 삽질도 많이 했지만 결국 원하는 작업물을 얻을 수 있었다. 

로컬 환경에서 테스트를 진행 후 팀에 공유할 예정이었다.

하지만 곧 문제가 발생하더라. ㅎ_ㅎ

프로젝트 빌드 과정 중 전체 파일을 대상으로 컨벤션 체크 task가 수행되었고 빌드는 실패가 되었다.

생각했던 프로세스에는 없던 과정이었다.

팀 내 컨벤션 체크를 강제화 하기 위해 해당 플러그인을 적용했던 것이었지만 우선 작업한 소스에 대해서만 컨벤션 강제성을 두고 싶었다.

그래서 다시 한번 gpt한테 도움을 요청했다.

4. 절정 - 결말

GPT는 여러 가지 해결책을 제시해 주었다.

그래서 희망을 갖고 시도를 했지만 프로젝트에 적용되지 않았고 오류만 발생했다. ㅠ.ㅠ

한 이틀 동안 비슷한 질문과 답변을 주고받았지만 해결책은 찾지 못했다.

(좀 더 시간을 투자했다면 해결책을 찾을 수 있을지 모른다. 하지만 개인 프로젝트가 아니었고 회사 업무였기 때문에 적정선에서 타협했다 ㅠ)  

결국 전체 소스에 대해 컨벤션 리펙토링을 진행한 뒤에 ktlint plugin과 pre-commit 작업을 추가함으로써 마무리하는 것으로 했다.

(컨벤션 리펙토링 때문에 생각지 못한 시간을 쏟았지만 전체적으로 컨벤션을 통일하고 나니 기분은 깔끔해서 좋았다.)

결론

업무를 처리하는 과정에 Chat GPT를 사용해 보고 느낀 점을 나열해 봤다.

1. 생각보다 많이 친절하다.
   단순히 스크립트 작성해 달라고만 했지만 작성 후 간단한 설명까지도 해준다.
   쉽게 놓칠 수 있는 주의사항까지도 알려준다.
   
   
2. 구글링을 해도 잘 나오지 않는 마이너 한 개념, 지식, 적용방법이 궁금할 때 활용하면 좋을 것 같다고 생각했다.
3. 최대한 상세하게 배경을 설명하면서 질문을 해야 한다.
   배경지식이 1도 없는 기계와 대화하기 위해선 상세한 배경을 설명해 주는 게 필요하다고 느꼈다.
   (여러 번의 질문 & 답변 을 하다 보니 약간 면접과도 비슷하다고 느꼈다. 말 잘하는 ai 부럽다…)
   
   
4. 나는 분명 컴퓨터와 대화를 주고받았지만 이런 경험이 쌓이면 협업에서도 많은 도움이 될 것 같다고 생각했다.
5. 너무나 즉답이 나오기 때문에 휘발성이 좀 강하다. 의식적으로 기억하려는 노력이 많이 필요할 것 같다.

재밌었다.

삽질도 하긴 했지만 매우 유용한 도구라는 생각이 들었다. 

함께 일을 하는 데 있어서 소프트 스킬이 중요하다고 느끼고 있는 요즘, Chat GPT를 사용하면서 협업 그리고 대화에 대한 스킬을 기를 수 있지 않을까라는 생각도 들었다.

아직은 본능적으로 익숙한 구글링을 먼저 하고 있지만 점점 사용할 일이 많아질 것 같다.

곧, GPT를 이용한 업무처리가 자연스러워질 것 같은 느낌적인 느낌이 든다!