리크루팅을 위해 어플라이 사이트를 개발했다

목차

· 너무 형식적인 UI와 사용자 경험이 마음에 들지 않았다.

· 내 집은 디스코드

· 처음 진행해본 프로젝트 QA

· 잘 돌아가고 있다, 내가 만든 서비스가

· 다시 처음 개발했던 때로 돌아간다면

---

멋쟁이사자처럼 5기와 6기를 수료하고, 다시 11기를 시작했다. 군 입대와 동시에 7기 운영을 선배 누나가 진행을 해주셨고, 그 후에는 학교의 멋쟁이사자처럼이라는 단체가 사라졌다. 학교 생활보다 대외 활동을 더 재밌게 임할 수 있었던 나는, 사람들과의 네트워킹이 얼마나 중요한지를 알게되었고 교내 중심으로 활동을 하는 멋쟁이사자처럼 강남대학교라는 단체가 사라졌을 때 당시 군입대를 하고 있던 너무 아쉬웠다.

너무 형식적인 UI와 사용자 경험이 마음에 들지 않았다.

아는 동기형님이 멋쟁이사자처럼 11기를 다시 만들고싶다고 연락이 왔다. 사실 대외활동을 계속해왔던 나로서, 너무 반가운 소식이었고 나 또한 졸업을 앞두고 있었지만 사람들과의 커뮤니케이션이 너무 재미있어 11기에 동참을 하게 되었다. 그렇게, 15명의 학교 운영진이 모였다.

 

열심히 운영진 트랙 별 방학 스터디를 준비하였고, 슬슬 예비 회원들을(멋쟁이사자처럼에서는 예비 사자라고 부른다) 모집할 시기가 되었다. 멋쟁이사자처럼에서는 보통 대학 별 회원 모집을 위해 구글폼을 던져주는데, 구글에서 만든 서비스라서 편리하긴 하지만 정말 형식적인 폼을 제공할 뿐, 팀을 꾸려 팀 프로젝트를 통해 더 예쁘고, 자체적인 서비스로 회원들을 모집하고 싶은 욕심이 강했다.

 

그래서 CJ 출신의 후배와 같이 멋쟁이사자처럼 어플라이 사이트 개발 작업을 시작했다. 예전 대외활동을 통해 UX와 UI 디자인을 배웠고, 디자인 툴을 다룰 줄 알았기 때문에 전체적인 와이어프레임 설계와 기본적인 퍼블리싱을 진행했고, 각 기능 별 컴포넌트를 구현을 시작했다.

내 집은 디스코드

프론트엔드 1명과 백엔드 1명으로 작업을 했기 때문에, 작업할 것들이 조금 많았다. 그래서 아침에 일어나서 잠을 깨고 디스코드에 접속을 해서 거의 매일 회의를 하며 작업을 진행했다. 기능에 따른 구현 사항 및 문제가 생기면 바로 디스코드로 접속해서 회의를 진행하고 수정을 해나갔다. 

 

디스코드 환경에서 계속 협업을 진행했다.

정규표현식을 이용해 각 입력 주제에 따른 값을 제한하고, 각 기능 별 API 연동을 진행하고, 반응형 설계를 하는 과정에서 처음 서비스를 구상할 때만 해도 일주일이면 끝날 것 같았던 프로젝트가 여러 반례 요소 및 사용자의 편의성을 고려하다보니 생각보다 길어졌다. 만드는 과정에서는 조금 힘들었지만, 만들고나서의 산출물을 바라보는 뿌듯함은 개발자라면 모두가 느낄 것이라고 생각한다.

처음 진행해본 프로젝트 QA

QA 테스트 엔지니어라는 직무를 알고있긴 했지만, 현직에서 일을 해보았던 후배의 제안으로 운영진 중 QA 팀을 모집했다. 보통 프로젝트를 진행할 때 UI를 구성하고 혼자 테스트를 해보는 편이었는데, 실제로 QA 팀을 모집해 프로젝트 테스트 환경을 돌려보니 바꿔나가야 할 사항들이 많았다. 

멋쟁이사자처럼 어플라이 QA 워크 스페이스

입력란에 대한 정규 표현식을 본래는 고려하지 않았으나, 만에 하나에 대한 오류를 제거하기 위해 정규표현식으로 입력란에 대한 제한 값을 주었고 그 밖에 사용자 환경을 고려한 부분들에 대해서는 모두 부분 별 구현 및 테스트의 반복을 통해 기능 구현을 진행했다. 그리고 프로젝트를 진행하면서 처음으로 크로스 브라우징 문제에 직면을 했다.

 

· IOS Safari 브라우저의 new Date 객체 문제

· IOS 모바일 환경에서 키보드 입력 시, 모달창의 위치가 재설정되어지는 문제

 

자바스크립트의 new Date 객체를 통해 시간을 비교해 지원서 사이트가 자동으로 열리고 닫히는 서비스로 설계를 하였는데, IOS 운영체제의 Safari 브라우저만 이상하게도 이 방식이 작동하지 않았고, 이 문제는 처음에 "nn-nn-nn"과 같이 시간에 관련된 표기를 하였으나, "nn,nn,nn"과 같은 정규 표기로 변경을 하면서 이 문제를 쉽게 해결할 수 있었다.

 

모달창을 띄우는 위치를 사용자의 scrollY 좌표를 이용해서 화면 중간에 띄우는 방식으로 채택을 했는데, PC 환경에서는 잘 동작하는 기능이 이상하게도 태블릿이나 모바일에서 키보드가 올라오면 화면 크기가 작아져 다시 위치에 맞게 렌더링을 하는 문제점을 발견했다. 키보드 입력에 따라 모달창 또한 새롭게 렌더링 되기 때문에, 이를 모달 창이 첫 렌더링 되었을 때의 해당 위치에 고정 시켜 놓는 방식을 택해야했다. 그래서 첫 모달 창의 렌더링 시에 useRef를 통한 스타일 지정으로 이를 해결할 수 있었다.

 

개발자의 시선이 아닌 사용자의 시선으로 프로덕트를 봐야하는데, 자꾸만 개발자의 시선으로만 프로덕트를 바라보았던 것 같다. 생각지도 못했던 부분에서 사용자 경험을 고려하지 못하고 있었고, QA 테스트에 대한 중요성을 한번 더 느끼게 되었다. 실제 서비스에서 사용자가 이런 불편한 부분들을 겪었다면 양질의 서비스를 제공하지 못하는 꼴이 되기 때문에, 다양한 시선에서의 좋은 프로덕트를 위한 시선을 가질 수 있도록 해야한다. 

잘 돌아가고 있다, 내가 만든 서비스가

23년 기준, 2월 20일부터 3월 07일까지의 서비스 기간이 제공된다. 다행하게도 서버 비용 상에 문제는 멋쟁이사자처럼에서 제공해주는 크레딧 + 구글 기본 제공 크레딧 + 5만원 사비를 통해 서버 비용을 지불하였고, 글을 작성하고 있는 이 시점(03월 02일)에 서비스가 정상 작동 중이다.

실제 서비스 되고 있는 리크루팅 사이트

지원서 특성 상 지원자에 대한 정보를 담아가는 곳이기 때문에, 모바일로는 질문에 따른 장문에 답을 하기에 한계가 있을 거라고 생각을 했다. 그래서 모바일에서의 접속을 제한하고, 태블릿부터 PC까지의 서비스를 제공하는 방향으로 서비스를 진행했다. 그리고 우측 하단에 채널톡 API를 통해 지원서 작성과 동시에 CS팀과 질의응답을 주고받을 수 있도록 만들었다.

 

현재 많은 지원서와 채널톡 질의 응답이 접수 및 진행되고 있고, 딱히 문의사항으로 웹 사이트 이용에 관련된 불편함은 접수되고 있지 않다. 하지만, 프로젝트 개발에 있어 리팩토링을 계속 해줘야하며 현재는 질문에 관련된 부분이 하드 코딩된 상태기에 추후 멋쟁이사자처럼 활동에 있어 해당 어플라이 페이지의 동적 활용을 위해 유연한 코딩으로 SasS 서비스 처럼 변경해 활용할 예정이다.

다시 처음 개발했던 때로 돌아간다면

프로젝트 진행을 거의 단독으로 진행을 했었기 때문에, 후회가 많이 남는 프로젝트면서 실제로 서비스를 통해 기쁨이 많이 남는 프로젝트이기도 하다. 이 때문에 처음으로 다시 돌아간다면 요즘 협업 프로젝트에 도입을 하고 있는 ESLint와 Prettier을 통해 코드 포맷팅과 가독성을 조금 더 높이고 싶고, 프론트엔드에서 할 수 있는 최적화 부분에 있어 다양한 도전을 해보고 싶다.

 

다음은 메인 페이지 프로젝트를 진행 할 예정이다. Next.js를 통해 SSR을 통한 SEO를 진행해볼 것이고, 단기적인 사이트가 아닌 장기적인 서비스로 운영될 수 있는 서비스를 만들기 위해 팀원들과 같이 공부하고, 틈틈히 배워가야겠다. 현재 어플라이 프로젝트는 여기서 끝난 것이 아닌 계속 리팩토링을 진행하면서, 뜯어가고 고쳐나가려고 한다. 한번 쓰고 안 쓰는 프로젝트라면 만들지 않았기 때문에, 리팩토링을 진행하고 유동적으로 운용될 수 있는 서비스를 위해 서비스 기간이 종료 되면 팀원들을 모집해 다시 리팩토링을 진행해 볼 예정이다.