판교 삼평동

백오피스 서비스를 개발하다보면, 장시간 어드민 페이지에서 잔류할 경우가 많은데 이때 여러 다중 탭들을 많이 생성해서 띄어놓게 된다. 그 중에 가장 불편했던 점이 여러 탭들이 있으면 탭 별로 구분이 잘 안가서 탭을 하나씩 클릭하게 되는 상황이 발생한다. 같은 탭이 5개 이상 ^,^ 데스크탑에 많이 앉아있는 사람이라면 탭을 여러 개 띄어놓는 구조는 당연하다. 근데 기존에 구현되어있는 백오피스는 특히 새 창으로 띄워 상태를 관리하는 기능들이 참 많았고, 메뉴에 들어가 게시글 작성이나, 조회를 할 때마다 새 탭이 열리는 구조였다. 그러다보니, 엄청나게 많은 탭들이 개발을 마친 후나 테스트를 마친 후에는 정~말 많아진다 ^,^ 탭의 개수가 작으면 클릭할 탭이 몇개없어 문제가 되진 않으나, 탭이 정말 많아지면 이게 어떤 탭인지 공황장애 상태가 온다. 이 문제를 해결하는 방법은 현재 페이지의 상태를 외부로 노출을 시키는 것인데, 클릭을 하지 않고 확인할 수 있는 방법은 탭의 문서(HTML Document) 별 타이틀을 변경하는 것이다. 문서 (HTML Document) 타이틀 변경하기 페이지 단에서 접속할 때마다 단순하게 해당 페이지가 어떤 페이지를 의미하는지 변경만 해주면되는 간단한 작업이다. 나 같은 경우, 여러 페이지에서 다중적으로 사용하기 때문에 useSetDocumentTitle 컴포저블을 만들어 사용해주었다. 관련 옵션 및 매개변수들에 대한 내용들은 JSDOC 에 담아놓았다. 사실 페이지 별로 일일히 해당 컴포저블의 코드를 달기가 무척이나 힘들다. 구조를 어떻게 설계하느냐에 따라 다르겠지만, Vue 에서는 createRouter 에서 각 routes 에 name 값을 지정할 수 있기 때문에 사이드 바에 해당 컴포저블을 삽입해두고 (공통적으로 모두 들어가기 떄문에) 라우트가 변경될 때마다 현재 route 의 name 값을 가져와 문서의 타이틀을 변경해주는 형식으로 해결했다.

여느 회사나 다 마찬가지겠지만, 우리 회사도 PR 템플릿이 있음. PR 양식은 있지만, 파일에 템플릿 마크다운이 들어가있지 않아서 처음에는 직접 입력을 해야했음,, 우리 회사는 BitBucket 을 쓰고 있는데 이 녀석이 깃허브랑 유저 인터페이스가 달라서, 템플릿을 어떻게 추가해야하는지 몰라서 혼자 이것저것 추가하는 나를 보며 팀에서 권한이 없다는거를 알고 추가해주셨음 (권한이 없다는거를 늦게 알았 ^.^,,) 템플릿이 있다는 것은 체계적이어서 정말 좋았지만, 여기서 기능 하나가 뭉텅이로 들어갈 경우에 구현 내용 란에 모든 파일 이름을 적고, 구현 내용에 대한 세부 내용을 적어야하는게 너무 공수가 많이 들었음 예를 들어 개발을 3시간 했다면, 템플릿에 적는 시간은 10분~15분.. 이게 적은 시간 같아도 손가락도 아프고 정말 비효율적인 시간이었음, 그래서 인공지능이 나왔으니 이거를 활용해서 내 소중한 시간을 다른데서 더 효율적으로 써보자고하는 마음에 사내에서 제공하는 깃허브 코파일럿을 활용하기로 함. 먼저 가능한지부터 확인하기 위해 코파일럿에게 아래와 같이 프롬프트를 만들어서 제공을 해주었음 이렇게 프롬프트를 제공하니까 어느정도 결과가 도출되긴하는데 수정 내역을 그냥 대충 적는다거나 내용적인 부분에서 부실한 영역들이 있었는데 이 부분들은 프롬프트를 조금 더 자세히 비추상적으로 적으면서 해결을 할 수 있었음. 위의 .prompt.md 파일을 정의해두면, 이 파일을 기반으로 컨텍스트로 참조하게하여 프롬프트의 성향을 해당 마크다운 파일에 맞출 수 있음. 그래서 매번 정의할 필요없이 이 마크다운 파일 하나만 있으면 동일한 규격의 비슷한 결과들을 도출해낼 수 있다. 아래와 같이 실제 결과로 도출할 수 있었음. 이렇게 반자동화를 해놓으니까 직접 PR 템플릿을 적어나갈 필요 없이 결과물만 복사-붙여넣기 하면 되니까 효율이 넘사로 빨라졌음. 아직도 해결하지 못하는 문제는 개발을 마쳤으면 프롬프팅으로 한번 템플릿을 직접 요청을 해줘야한다는거임. 완전 자동화하려고 했는데 깃허브처럼 BitBucket 에 바로바로 깃액션을 붙일 수 있는 구조가 아니고, n8n 으로 자동화를 하려고 해도 신규 서버를 설치해야하는데 기존 빌드 서버들이 엄청 복잡해서 시니어들도 쉽게 건드릴 수 없는 구조.. (보안 회사라 뭐 하나 할때마다 품위올리고 안전 검사 받아야하고 사내 인프라 서비스가 엄청 거대하다보니, 오래 재직한 사람들도 모르는 경우가 많음)

현재 백오피스는 그나마 많이 레거시 코드를 청산하고 있지만, 아직도 처리해야할 것들이 많음 그 중에 하나가 유저 인터페이스가 정말 몇년 전 구닥다리 인터페이스라는 것인데, 이것들을 한번에 변화하기 보다는 점진적으로 변화해야하겠다고 마음 먹음 (한번에 하기에는 정말 양이 너무 많고, 그러다 비즈니스적인 이슈들을 제때 처리하지 못함) 우당탕탕 겁나 불편한 메뉴 구조 그 중에 메뉴가 점점 많아짐에 따라 기능 찾기가 어렵다는 생각이 들었음 (특히 슈퍼 관리자는 모든 메뉴를 볼 수 있음) 아래 사진을 보면 대메뉴들 아래 하위 메뉴들이 정말 많은데, 펼치면 펼칠수록 스크롤로 한땀한땀 찾아야함 그래서 아래와 같이 메뉴 구조의 사전에 정의해둔 메뉴 별 고유 key 값을 통해 자바스크립트로 찾는 로직을 구현해서 추가를 해두었음 (이 기능은 메뉴가 많은 슈퍼 관리자한테만 보이도록 하였고, 일반 사용자들은 안보임) 메뉴를 찾을 때는 사용자가 입력한 키워드에 형광펜 표시로 까막눈도 잘 보일 수 있도록 해놓았음 뭔가 3프로 부족한 느낌 5~6년전부터 존재해왔던 사이드바여서, 맨 하단의 사이드바를 접으면 아이콘만 나오는데 이 아이콘에는 툴팁도 없고 어떤 기능으로 쓰여지고 있는지 의문점이 들음. 그래서 과감히 하단의 사이드바 접기(아이콘만 볼 수 있는) 버튼을 없애고, 상단의 사이드바 전체 접기 버튼만 나올 수 있도록 레이아웃을 변경하고자했음. 또 하위 메뉴들에 아이콘이 노출되고 있지 않아 가독성이 떨어지는 부분도 해결을 하고 싶었음, 이 부분은 MDI에서 제공해주는 아이콘들이 있어서 이 아이콘들을 활용하여 작업을 하면 될 듯 함 추가로 나는 Arc 브라우저를 사용하는데, Arc 브라우저 처럼 Ctrl + S 를 누르면 오로지 커맨드로만 사이드바가 접히도록 구현하고 싶었음. 그래서 정리를 하자면 아래와 같은 기능들이 더 개선되어 추가될 예정이었고, 곧바로 추가하고자했음 메뉴의 불필요한 버튼 제거 및 기능 개선 메뉴 별 메뉴 컨셉에 맞는 아이콘 제공 Arc 브라우저 처럼 사이드바 커맨드 제공