📌프로젝트를 진행하면서 구현했던 기능들을 정리
- 처음 경험해 본 것이거나
- 구현하는데 있어서 많은 어려움이 있었거나
- 계속 고민했던 부분들
🥑그럼 이번에는 플러그인으로 부탁해-
🙋♂️소장님 : 빠른 검색 만든거 다른 곳에서도 사용할 수 있게 플러그인으로 만들어 볼래?
(플러그인이요..?)
플러그인이라는 얘기를 듣자마자 지금 구현되어 있는 방법을 전부 뜯어 고쳐야 할 것 같은 느낌이 들었다.
처음부터 플러그인으로 빠른 검색을 구현했던 것이 아니었고, 플러그인을 직접 만들어 본 경험이 없었기 때문에 도대체 어디부터 어떻게 손을 대야할지가 너무 막막했다.
이 때가 지금까지의 모든 프로젝트 기간 중에 제일 많이 고민하고 시도해보고 실패해보고 했던 시간이었던 것 같다.
🥑문제가 크다면 쪼개보자
처음부터 플러그인을 어떻게 만들지? 지금 코드에서 어떻게 수정하고 어떻게 접근해야하지? 라고만 생각 하니까 정말 진짜 어디서부터 어떻게 손을 대야할지 모를 정도로 막막했다. 그래서 작은 단위로 접근해보기 시작했다.
1. 플러그인이란?
플러그인은 쉽게 설치하고 사용할 수 있는 프로그램이다.
따라서 가장 중요한 건 사용자는 플러그인을 불러오는 코드만 자신이 사용할 곳에 붙여 넣으면 된다. 그러면 나머지는 플러그인을 만든 개발자가 다 구현해 놨기 때문에 쉽게 사용할 수 있다.
2. 무엇이 필요한가요?
기존의 코드는 사용하는 곳마다 html로 버튼과 멀티창을 만드는데 이를 사용자가 생성하도록 하는게 아니라 내가 플러그인 내부적으로 구현할 필요가 있겠다.
플러그인을 불러오는 코드
- 플러그인에 필요한 데이터를 초기화
- 플러그인에 구현하는 스크립트를 load
- 크로스 브라우징 처리
플러그인을 실제 구현하는 스크립트
- 빠른 검색 버튼, 멀티창, 멀티창 내부 요소
이 부분이 실제 플러그인을 동작하게 하고 UI를 띄우는 핵심 부분이다. 어떻게 구현할지를 고민하면서 지금 구현되어 있는 빠른 검색을 플러그인으로 바꾸는데 치명적인 문제가 있다는 사실을 알게 되었다.
현재 빠른 검색 기능의 멀티창은 <div>태그로 구현되어 있기 때문에 플러그인으로 사용되었을 때 기존의 웹페이지에 영향을 줄 수도 있고 영향을 받을 수도 있다. CSS 같은 부분이!!
그래서 다른 방법을 찾아보다가 <iframe>을 알게 되어서 멀티창을 구현하는 로직을 전부 <iframe>으로 바꾸게 되었다.
이렇게 바꾸게 되면서 스크립트를 크게 두 부분으로 나눠서 작성했다. 1)iframe 생성, iframe 내의 document에 필요한 부분 구현, 2)플러그인이 로드 되었을 때 눈에 보이는 UI들, 요소 제어 로직 구현으로 나눴다. 1번에서 iframe이 제대로 준비되면 여기서 2번 스크립트를 로드하는 방식으로 구현했다. 그래서 2번 또한 문제없이 동작되었을 때(사용할 준비가 되었을 때) 사용자에게 UI가 보일 수 있게 했다.
플러그인 로직으로 수정해도 잘 동작한다!
🥑Comstomization
플러그인을 만들다보니 사용하는 곳에 맞춰 버튼의 디자인을 바꾸고 싶을 수도 있을 것 같다는 생각이 들어서 버튼 커스텀 기능을 추가했다.
실제로 적용한 모습이다!
🥑플러그인 document 작성
플러그인을 사용하는 사람들이 볼 수 있는 document를 작성했다. 이 때 사용자에게 친절한 문서가 되도록 노력하면서 썼다. 1) 최대한 처음 사용하는 사람이 보는 입장에서 읽는다고 생각하고 2) 개발자가 아닌 사람이 봐도 쉽게 적용하고 이해할 수 있도록 예시를 넣어서 작성했다.
2번 같은 경우는 4개월 동안 회사를 다니면서 느꼈던 개발팀과 회사의 분위기?를 생각해서 필요하다고 생각했기 때문에 document를 작성하면서 고려했다. 회사의 개발자는 2명 밖에 없어서 한 분 한 분에게 일이 많아서 하루에도 계속 개발팀에 오셔서 '이런 것좀 추가해 주세요, 이것 좀 빼주세요, 이게 보이지 않는데 확인 부탁드려요...' 등등의 많은 이야기를 하신다.
회사의 다른 업무 같은 경우는 다른 팀에서 어디까지 담당하고 어디가 개발팀의 영역인지 잘은 모르겠지만, 만약 플러그인이 회사의 다른 업무에도 이용 된다면 최대한 전공자가 아니더라도 할 수 있도록 해서 개발팀에 오는 일을 최대한 줄일 수 있었으면 좋겠다라고 생각했다.
🥑느낀점
플러그인을 개발을 한창 하다가 마무리 지은 날 데일리 로그에 내가 적어놓은 느낀점이다. 플러그인 개발은 기존의 로직을 전부 갈아엎는 대공사였고 처음 플러그인을 만드는 거여서 내가 할 수 있을까?라는 걱정이 가득했기 때문에 완성했을 때 더 느낌이 남달랐던 것 같다.
정리하면서 돌아보니까 프로젝트를 진행하면서 상황을 정리하고 실제로 해보기 전에 문제를 분석해보는 습관이 생겼다는 것을 알게 됐다. 이전에는 무턱대로 '이렇게 해볼까?'하고 해보고 안되면 다른 방법, 다른 방법 하다가 해결하고는 했다.
하지만 프로젝트이 규모가 커지고 작업하는 부분이 커지게 되면서 그냥 무턱대고 하는게 훨씬 시간적으로도 비효율적이고 문제를 푸는데 전혀 도움이 안된다는 걸 올해 상반기에 졸업작품을 하면서 느낄 수 있었다. 그래서 그 때부터 조금씩 조금씩 의식적으로 상황을 정리하고 문제를 분석하고 해결방법을 찾는 연습을 시작했는데 지금 와서 보니까 어느 순간 습관이 되어서 지금 프로젝트에서는 너무 당연하게 하고 있는 나를 보게 되었다.
정말.. 너무너무 신기하기도 하고ㅎㅎㅎ 이렇게 정리하는 것도 아직 1) 내가 생각한 과정들을 잘 풀어낼 수 있고 2) 다른 사람이 보기에도 이해하기 쉬운 가장 알맞는 포맷을 찾아가는 중이지만 이런 과정들도 모여서 나중에는 성장할 거라는 기대도 든다✨
