'소다란' 웹사이트 개발 후기

 2020년 7월에 입시컨설팅플랫폼 '소다란(www.sodaran.com)'의 웹사이트 개발을 시작했다. 12월에 런칭 후 2021년 3월 현재까지도 유지보수 중이며 군 입대전 인수인계는 마무리 한 상태다. 소다란은 성균관대학교 소속 경영학회 인액터스의 사업 프로젝트 중 하나이다. 소다란에 속해있던 친구의 소개로 웹사이트 개발 일을 여름방학 동안 맡아 진행하게 되었었다. 개발 경험이 많지 않던 나였기에 사이트를 개발하며 넘은 산이 엄청 많았다. 그 후기를 남겨보고자 한다. 

 후회된 일과 잘한 일을 나눠봤는데 사실 송구스럽게도 잘한 일은 거의 없다. 그럼에도 나중에 같은 잘못을 반복하지 않기 위해 하나하나 분명히 되짚어보고자 한다. 자잘한 개발 이슈 보다는 큰 틀에서의 방향성을 지적한다.

---

<후회되는, 잘못 판단한 일들>

 

1. 웹사이트 제작을 맡은 일 그 자체

 당시 나는 번듯한 하나의 기업용 웹사이트 외주를 맡을만한 역량이 분명히 없었다. 사실 사이트 제작 일을 맡은것은 당초 내 의사가 아니었다. 소다란 서비스 기획에 참여하며 개발 영역에 적극 협조하겠다는 뜻이었는데, 어쩌다 보니 사이트를 우선 직접 제작하는 것으로 얘기가 되었다. 당시 내 개발 실력은 현재의 1/2 이하였다. 사이트를 제작하면서 훨씬 실력이 늘었다. 제작에 필요한 기술 스택은 모두 알고 있었으나, 코드 작성 실력이 부족해 추후 유지보수에 곤혹을 치뤘다. 

 

2. 쇼핑몰 솔루션 서비스를 얕잡아 본 것

 당시 소다란은 '아임웹'의 쇼핑몰 사이트 제작 서비스를 이용하고 있었다. 개발인력이 없는 소다란 팀에서 사이트를 직접 제작하고 운영할 수 있는 최선의 수였다. 다만 당시 내가 보기에 소다란의 비즈니스 구조는 아임웹 사이트에 fit이 좋지 않았다. 그리고 당시 소다란 앱을 기획중에 있었는데, 사이트의 백엔드를 끌어다 쓰지 못하기에 '웹뷰(webview)'의 형식으로 밖에 앱을 제작하지 못했다. 때문에 사이트를 자체 제작할 명분이 있다고 판단한 것이었다. 그러나 '아임웹' 서비스 선택지 외에도 타사의 맞춤형 쇼핑몰 솔루션 서비스의 선택지가 더 다양했고, 내가 생각한것보다 훨씬 효율적인 방법이었다. 창업 지원자금이 충분한 소다란에게 훨씬 나은 선택지가 있던 것이다. 

 

3. 사이트 기획이 충분히 이루어지지 않은 채 개발에 착수한 것

 당시 나는 무조건 사이트를 빨리 개발하는 것에 집중했다. 때문에 사이트의 레이아웃 디자인이라던가 디테일한 요소들의 충분한 논의 없이 코딩을 시작했다. 이는 결국 개발시간을 더 늘리는 원인이 되었다. 소다란 측에서 요구하는 디자인은 계속 변화했고, 세부 기획도 자주 수정됐다. 레이아웃도 아임웹 사이트의 레이아웃을 대거 참고했으나, 페이지마다 일관성이 없고 디자인 가이드라인의 개념조차 없이 주먹구구식으로 작업했다. 지금 생각해보면 정말 어질어질하다. 소다란 팀원분들도 당연히 이런 부분에 있어선 생소했기에 문제의식이 없었다. 

 

4. 전문 웹디자이너의 디자인 시안, 가이드라인 없이 작업한 것

 당시엔 디자인 체계의 중요성을 크게 인지하고 있지 않았다. '퍼블리싱'의 중요성은 알고 있었으나, 이전에 디자인 자체의 중요성을 간과한 것이다. 기본적인 폰트나 사이트 내 사진들, 몇 가지 색상은 주어졌으나 전문 디자이너의 필요성을 메꾸지는 못했다. 당시 나는 소다란 팀원 분들의 디자인 실력이면 충분하고 외부인력이 필요하진 않을 것이라 생각했으나, '웹'에 대한 이해를 기반으로 한 디자인은 분명 다른 것이었다. 페이지 별로 일관된 그리드, 픽셀 간격, 가이드라인 등 이것들이 제대로 명시되지 않을 때 페이지 레이아웃은 그야말로 엉망진창이 된다. 이에 대한 문제점을 나는 어렴풋이 느꼈고, 때문에 소다란 팀원분들에게 adobe XD 사용법을 익힐것을 추천했다. 뒤늦게 한분이 익혀서 adobe XD로 작업한 사이트 디자인 시안을 건냈는데, 글자 크기나 컴포넌트 비율이 다 커서 수정해 적용해야 했다. 지금 생각해보면 일찌감치 외주를 맡기는 것이 제일 현명한 판단이었다. 

 

5. 사이트 개발 과정을 카카오톡으로 공유한 것

 사이트를 개발하며 업데이트한 내역을 카톡으로 공유하고, 피드백도 카톡으로 받았는데 카톡 대신 슬랙이나 노션, 혹은 여타 이슈 트래커를 활용했어야 했다. 당연한 소리지만 카톡은 이전 대화내용 검색도 힘들고 이슈를 분류하여 보기 힘들다. 다른 협업 도구를 활용했으면 생산성이 엄청 향상됐을 것이다. 

 

6. 개발 과정동안 코드의 주석을 충분히 작성하지 않은 것

 코드의 질이 나쁜 것은 둘째 치고, 개발의 기본도 지키지 않았다. 현재 소다란 사이트 코드가 약 2만줄 가량 되는데 아무리 내가 작성했다 한들 분명히 까먹는다. 유지보수나 추후 추가로 외주를 맡길때를 고려하면 반드시 주석을 작성했어야 했다. 런칭 이후에서야 코드를 고치며 주석을 작성하기 시작했다. 

 

7. 충분한 개발 공부를 병행하지 않은 것 

 개발 초기 1달간은 모르는 것도 많고, 작성해야할 코드도 많았기에 당장 필요한 지식 외에 추가적인 지식을 습득할 짬은 없었다고 변명이 가능하다. 허나 이후에는 조금의 여유가 생길때 추가적인 개발 공부를 병행했어야 했다. 새로운 프레임워크, 코드 디자인 패턴, 개발 인프라, 배포환경 등 아직 부족한 지식이 많은 상황에서 추가적인 개발 공부를 하지 않은 것은 직무유기다. 이부분은 지금도 앓고 있는 문제다. 

---

<상대적으로 잘한? 일, 판단들>

사실 잘한 일은 없지만 억지로 몇 개 짜내어보면 다음과 같다.

 

1. 중간에 그만두지 않은 일

 이건 소다란 측에선 좋지 않은 일일 수도 있다. 염치 없지만 몇 달이고 마감 기간을 넘기면서도 결국 런칭을 해냈다는 '결과'를 낸 것이 의미가 있다고 본다. 코드는 엉망진창일지라도 결과적으로 소다란측에서 요구한 기능을 모두 구현했고 마무리지었다. 도중에 너무 막막해서 앞이 보이지 않을 때가 여러번 있었으나 모두 넘어섰다. 개인적인 관점에서 이는 못한 일이기 보단 잘한 일이라고 생각한다. 물론 그 흠이 너무 많지만...

 

2. 실력이 부족한 만큼 많은 시간을 투자한 일

 사이트의 완성까지 불확실 요소가 너무 많았기에 이를 빨리 해소하고자 첫 1달간은 정말 숨만쉬고 코딩만 했다. 본래 방학때마다 메이플스토리 하는것이 국룰인데, 손도 대지 못했다. 실력도 없는데 시간투자도 없었으면 정말 고개를 들지 못할 일이다. 그나마 방학기간에는 내 100%를 발휘해 개발했으므로 입이라도 열 처지가 겨우 되었다. 다만, 그 시간들을 보다 효율적인 방식으로 사용하지 못한것이 아쉽다. 

 

3. 필요한 기술 스택을 빨리 판단하고 학습한 일

 당초 실력이 부족했기에 '잘한 일'이라고 할 순 없으나 내 처지엔 잘한 일이다. 기존 ejs를 활용한 mvc 패턴으론 사이트 제작이 매우 번거로워질것을 예상하고 React 기반의 SPA로 방향을 결정했다. 러닝커브가 조금 있었으나 금방 적응했고, 로그인 상태관리를 위해 Redux도 도입했다. 회원가입 구현에 있어서도 보안이슈를 안전히 처리하기 위해 passport.js 라이브러리를 사용했다. db또한 mysql 대신 조금 더 관련 예제가 많았던 nosql인 mongoDB를 선택했다. 이 기술들을 학습하는데 조금 버거움을 느꼈지만 적어도 학습을 회피하지 않은 판단은 잘한 것 같다. 조금 아쉬운 점이 있다면 React hooks와 JWT, Typescript에 대한 학습은 끝내 뒤로 미룬 정도...? 

---

<어려웠던 점들>

난관들은 주로 개발의 영역에서 찾아왔다. 생각해보면 처음 접하는 것들은 대부분 어려웠다. 

 

1. 회원가입, 로그인 구현

 회원가입과 로그인은 보안과 관련돼있는 부분이기때문에 매우 민감하다. 특히, 세션이나 토큰을 이용해 로그인 상태 유지기능을 구현하려면 필연적으로 보안 문제가 발생한다. 이를 최소한으로 하기 위해 여러 라이브러리가 구현돼있는데 이를 취사선택하고 적용하는 일이 매우 번거로웠다. 처음 구현한 방식은 passport.js-mongodb-local의 세션인증 방식이었다. mongodb에 대한 라이브러리가 구현돼있어 비교적 간편했다. 그러나 리퀘스트 헤더에 담긴 쿠키를 다루기가 어려워서 구현에 성공하기까지 고배를 많이 마셨다. 3000번 포트에 React기반 클라이언트를 두고, 5000번 포트에 node.js-express 백엔드 서버를 두었는데 이 두 포트간의 통신도 정말 헷갈렸다. CORS 이슈부터 시작해서, 실제 호스팅 서버에서 열어두는 포트가 달랐다는 사실까지 시행착오가 참 많았다. 어찌저찌 구현은 되었지만 추후 JWT로 타 서비스를 개발해보았을때 세션인증보다 성능이 더 좋았다. 

 

2. React의 동기, 비동기 처리

 비단 react뿐만 아니라 다른 웹 프레임워크, 앱 프론트엔드에서도 중요한 이슈인데 데이터를 api로 로드하고 그 데이터를 기반으로 화면을 렌더링할때 비동기 처리를 하지 않아 오류가 많이 발생한다. 데이터가 도착하지 않았는데 변수에 값을 담으려 한다던가, 변수에 값이 비었는데 화면이 렌더링된다던가 등이다. 대부분의 코드 패턴에서는 비동기 처리를 위해 콜백함수(callback function)형식을 자주 사용하는데, js에서는 async, await 방식을 지원한다. 처음에는 이 방식이 생소하여 콜백함수만 남발했는데 나중에서야 왜 반드시 async, await를 써야 하는지 깨달았다. 비동기 처리에 대한 명확한 이해 없이 코드를 작성했을때 왜 오류가 난것인지도 모른체 자주 헤매곤 했었다. 

 

3. React의 컴포넌트 생명주기, JSX 문법 이해

 React를 처음 공부할때 제일 헷갈렸던 것이 컴포넌트 생명주기이다. 나중에 시행착오를 겪다보니 익숙해졌으나, 초반에는 대체 왜 오류가 나는 것인지 몰라 한참씩 헤맸었다. componentDidMount, componentWillMount 등의 함수의 사용법도 헷갈렸다. 여기에 2번의 비동기 처리 문제도 겹쳐서 화면의 렌더링에 오류가 수도 없이 일어났다. html과 사뭇다른 JSX 문법도 적응하는데 시간이 조금 걸렸다. class 대신 className을 쓰는 것, inline style 지정이 객체 형식으로 전달되는 것 등등.

 

4. 데이터베이스, api 설계

 소다란 서비스 특성상 사용자로부터 복잡한 형식의 입력 폼 데이터를 받아야 할 때가 많다. 사용자, 게시판 글, 컨설팅 신청서, 메세지 등의 데이터 모델을 직접 설계해야 했는데 데이터베이스 설계에 대한 전문지식이 희박한 상태에서 막무가내로 데이터 모델을 작성했다. nosql이었기에 큰 어려움은 없었으나 모델 형식이 비효율적이어서 프론트, 백엔드 양쪽에서 번거로움을 느꼈다. 무엇보다 모델이 수정될 경우 관련 코드를 모두 수정해야 했기에 더 신중해야 했는데 그러지 못했다. api 설계의 경우도 더 효율적으로 코드량을 줄일 수 있는것을 굳이 분리하는 등 바람직하지 않은 코드를 많이 짰다. 특히 예외 처리를 확실히 하지 않은 문제도 있었다. 

 

5. 반복작업에 의한 작업 효율 저하, 심리적 압박감

 '잘못된 판단'에서 언급했듯이 디자인 영역에 있어서는 최소한 디자인 외주를 맡기거나 퍼블리싱 외주를 맡겼어야 했다. 수십개가 넘는 컴포넌트의 마크업과 css를 일일이 작성했다. (심지어 직접 레이아웃을 짜고) 그러다보니 결국엔 1달쯤 지난 시점에 일에 질려버리는 일이 발생했고 반복된 디자인 수정 작업은 더욱 질려했다. 때문에 능률이 점점 떨어지고 반대로 수정 작업은 점점 많아져 마감일이 뒤로 밀리는 현상이 발생했다. 마감일이 뒤로 밀리면서도 학기중에는 학업이 바빠 일에 손을 못대는 날이 많았는데 심적으로 매우 괴로웠다. 나보다도 소다란 팀원분들께 직접적으로 폐를 끼치는 것이기 대문이다. 사실 이 일을 진행하는 내내 패시브로 정신적 압박감이 있었고, 종종 액티브하게 자책감에 매우 괴로워하곤 했다. 

---

<나에게 득과 실>

 결과적으로 이 일에 착수한 것 자체에는 후회가 전혀 없다. 위에서 언급한 세부적인 후회는 있었지만. 내 실력에 비해 과한 경험치였다. 상황이 위기고 긴박했기에 필사적으로 이것 저것 닥치는대로 흡수해 나갈 수 있었다. trade-off는 분명히 있었지만 이러한 큰 규모의 trade-off가 있었다는 것 자체가 의미있다고 본다. 소다란이 아니었으면 또 흐지부지 방학을 보냈을 것이 뻔하고 제자리걸음했을 것이다. 소다란의 개발 일을 발판삼아 더 앞으로 나아갈 계기가 생겼다. 그리고 소다란 팀원분들의 열정 넘치는 모습을 보며 많은 것을 배워갈 수 있었다. 

---

<마무리하며>

 우선 이 자리를 빌려 소다란 팀원분들께 큰 사과와 감사의 말을 드리고 싶다. 끝없는 응원과 위로의 말을 건내주었던 예림 누나, 항상 친절하고 든든했던 김지현 누나, 늘 밝고 재밌으셨던 박지현 누나, 디자인 때문에 고생 많이 하신 지은 누나, 직접 뵙진 못했지만 열정적이신 현 소다란 팀원분들, 특히 멀고 험난했던 인수인계 과정을 흔쾌히 받아주셨던 정혜 누나, 그리고 내 오랜 친구 설호까지. 모든 분들께 너무 많은 빚을 졌다. 평생 개발 일에는 손도 못 댈 것이라고 되내이던 내가, 누군가에게 개발자라고 불린것은 부끄러우면서도 기쁜 일이었다. 그 말이 거짓이 되지 않도록 더욱 노력할 뿐이다. 

 

 

 

 감히 제가 소다란의 개발자로서 여러분과 소통하고 함께 일할 수 있었던 것은 매우 큰 영광이었습니다. 이 글을 보실지는 모르겠지만, 고개 숙여 다시 한번 감사드립니다. 

 

 

-끝