[포트폴리오 웹 페이지] 웹사이트 리팩토링

 

 

개발자라면 꼭 가지고 있을 개인 포트폴리오 웹사이트를 만들었다.

 

직접 만들어보기 - 피드백 - 피드백 반영 및 추가 수정을 통한 웹 페이지의 변경 과정과 겪었던 어려움 등을 기록해 놓으려고 한다.

 

프로젝트 목표

 

1. 지속 가능성과 확장성을 가진 나만의 웹 페이지

 

개발자에 대한 꿈을 꿨을 때, 내가 관리하고 수정이 가능한 웹 페이지가 갖고 싶었다.

 

이제는 진정한 개발자가 되기 위한 마지막 단계를 밟고 있는 만큼, "나는 어떤 개발자가 될 것인가"에 대한 나의 개발 가치관과 생각을 정리할 수 있는 웹 페이지가 필요했다.

 

또한, 지속적인 유지/보수가 가능하고 더 다양한 페이지와 기능들을 제공할 수 있는 웹 페이지를 만들고 싶었다. 

 

개발자의 삶을 계속 이어나가다 보면 가치관이나 생각이 변할 수 있다고 생각한다. 이러한 변화를 지속적으로 업데이트하고, 실무에서 새롭게 배운 기술 또는 라이브러리를 적용해 볼 수 있는 웹 페이지를 만들고 싶다. 또한, 점점 더 발전해 나갈 미래의 내가 현재의 웹 페이지의 기능성을 향상할 수 있는 새로운 방법을 도입할 수 있었으면 한다.

 

2.  Vanilla JS로만 개발

 

React, TypeScript 등 다양한 라이브러리와 프레임워크를 배워보고 프로젝트에 적용해 보면서 "포트폴리오 웹 페이지는 꼭 Vanilla JS로 개발해야지"라고 생각했다.

 

새롭게 나온 프레임워크나 라이브러리가 JavaScript에 좋다면 "왜" 좋은지 알아야 한다고 생각했다. 

 

프로젝트에서 기술 스택이 선정되었을 때 기존 JavaScript와 차이점이 무엇인지, 또 어떤 장점과 단점을 가지고 있는지 알고 있어야 프로젝트의 정체성과 목적을 이해하고 기여할 수 있다고 생각하기 때문이다.

 

또한, 현재 진행 중인 프로젝트가 완성되었을 때 다른 기술 스택으로의 마이그레이션을 경험해 볼 수 있는 좋은 기회이기도 하다.

 

개발 초기 (1차 배포)

전체적으로 정리가 필요한 부분들이 많았다. 

 

개인 프로젝트였기 때문에 프로젝튼 전반에 관한 모든 것들(디자인, 기능 등)에 대한 피드백을 받았고, 이에 대한 결정을 스스로 내려야만 했다.

 

 

랜딩 페이지 Hero (배너)

 

초기 개발 페이지의 경우 기본 페이지에 간단한 본인 소개 문구를 적었었다. "안녕하세요"와 같은 중복된 문구가 있다는 것, 첫인상을 보여야 할 중요한 공간을 낭비하고 있는 것이라는 피드백을 받았다. 또한, "수상할 정도로 웹 개발에 진심"이라는 문구가 가벼운 개발관을 가진 인상을 심어줄 수 있다는 의견도 받았다.

랜딩 페이지에 Hero는 개발자 포트폴리오 웹 페이지에서 흔히 찾아볼 수 있는 부분이라 오히려 정형화된 느낌을 줄 수 있겠다는 생각도 들었다.

 

 

 

 

 

 

About Me 섹션

 

Sophie Brittain이라는 외국 디자이너 분의 포트폴리오 웹 페이지를 참고하다가 채택한 부분으로, 이력서의 내용과는 차별점을 두고 약간의 본인 소개와 취미 등을 적어놓았다. 하지만 정체성이 뚜렷하지 못한 나만의 한 줄 소개와 다소 모호한 개발 가치관, TMI라고 느껴질 수 있는 지나친 정보량 등 효과적인 자기 PR이 아니라는 생각이 들었다.

About | Sophie Brittain Design Portfolio

 

 

 

Stacks 섹션

 

초기 개발 중에는 내가 가진 기술 스택을 세분화하되, 질문을 받더라도 대답할 수 있는 기술 스택과 모르는 기술 스택을 명확히 분리하려고 노력했다. 하지만 이러한 노력에 대한 전달력이 떨어진다고 생각했고, 어느 정도의 기술적 구현이 가능한지 알 수 없다는 피드백을 받았다.

 

 

 

 

Projects 섹션

 

Projects 섹션에서는 진행했던 프로젝트들에 대한 설명과 사용한 기술 스택, 참고 링크, 그리고 프로젝트 주제 선정에 대한 배경을 간략하게 설명한 글을 적었다. 하지만 프로젝트를 진행하면서 겪었던 어려움, 명확한 프로젝트 진행 기간, 주요 기능에 대한 설명 등이 없다는 피드백을 받았다.

프로젝트 선정에 대한 배경보다 우선시 되어야 할 중요한 정보들이 부재되어 있음을 통감했고, 이미지로 제공된 각 페이지가 어떤 페이지인지, 또 어떤 기능을 제공하고 있는지 좀 더 자세한 명시가 되어있으면 좋겠다 생각이 들었다.

추가적으로 프로젝트 이해를 위해 제공된 이미지에도 캐러셀 슬라이더가 있을 수 있어 화살표 버튼이 잘 안 보여 혼동을 줄 수 있어 고쳐야겠다고 생각했다.

 

 

 

 

 

 

 

Contact 섹션

 

Contact 섹션이 페이지에 녹아들어 있어 섹션이 구분되지 않는 디자인적 불쾌함이 느껴졌다. 또한, 유효성 검사를 포함하지 않았기 때문에 무분별한 이메일 전송이 가능하다는 사실을 뒤늦게 알았다. 

추가로, footer 부분의 링크가 :visited 상태가 아닐 때 색이 디폴트 색인 검정으로 설정되어 있던 부분을 피드백을 통해 알게 되었다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

수정이 필요한 부분
- 보다 편안한 디자인과 레이아웃
- 전달력 있는 내용
- 페이지 정체성 확보 및 이에 따른 페이지 분류

 

2차 중간 배포

 

페이지 구성이 보다 간결해지고, 디자인도 많이 다듬어졌다.

 

페이지 정체성을 확립할 수 있는 계기이기도 했다.

 

이전과 다르게 포트롤리오 웹 페이지를 이력서와 분리하지 않기로 결정하고 이력서를 별개의 페이지로 포함, 노션을 통해 작성했던 이력서를 디자인 양식에 맞춰 추가했다.

 

개인 포트폴리오 웹 페이지에 모든 내용이 포함되는 것이 나에 대한 정보를 함축적으로 전달할 수 있다고 생각했기 때문이다.

 

전체적인 워딩과 보다 동적인 디자인 등 여전히 추가적인 수정이 필요한 부분들이 점차 보이기 시작했고, 여기서 추가적인 피드백을 통해 개선점을 물어보았다.

 

충격적이게도 mobile-first를 고려하지 못한 디자인으로 페이지를 만들어서 핸드폰 사이즈나 태블릿 사이즈에서 여러 페이지들(특히 프로젝트)이 디자인이 이상하게 보인다는 점도 뒤늦게 알게 되었다.

 

 

Home - 랜딩 페이지

 

이전에 About Me 섹션의 대부분을 차지했던 자기소개를 기본 랜딩 페이지로 분류했고 이동시켰다. 이 과정에서 "개발자 심민섭"을 보다 입체적으로 보여줄 수 있는 자기소개를 적었다는 긍정적인 피드백도 받았다.

하지만 페이지가 너무 정적이라는 피드백을 받았기 때문에 적당한 딜레이의 애니메이션을 추가하는 방법을 생각해 보았다. 더불어 상단 Nav 메뉴에 포함되어 있지 않은 링크들이 브라우저의 새 탭에서 열리지 않고 기존 페이지에서 이동해 불편한 UX를 제공한다는 피드백을 받았다. 해당 부분은 빠른 개선이 필요하다고 느꼈다.

 

 

Resume - About Me 섹션

 

대부분의 내용이 렌딩 페이지로 이동됨에 따라 보다 간결한 문구와 장점을 강조한 내용을 남겼다. 하지만 About Me 내용이 부실한 인상을 주고, 추가적인 이력서 및 프로젝트를 살펴볼 수 있는 링크가 없어져 UX가 불편해진 부분에 대한 개선을 생각해야 했다.

 

 

Resume - Stacks 섹션

 

이전에 단조로웠던 기술 스택 배지에 좀 더 상세한 설명을 추가했다. 어디까지 구현이 가능한지, 또는 어디까지 구현해 봤는지를 기술해 해당 기술 스택에 대한 나의 지식수준을 적어 놓았다.

하지만

 

"jQuery의 일부 기능만을 가져와 웹 페이지의 퍼포먼스를 고려한 개발이 가능하다."

 

등 설명이 모호하거나 비정확한 부분들이 있어 수정이 필요하다는 생각이 들었다.

추가로, 이전에는 배지들이 모여 있어 너비 조정이 필요하지 않았는데 채택한 디자인에서는 일부 배지는 늘어나 보이는 등 깔끔하지 못한 디자인이 되어 이에 대한 해결책이 필요했다.

 

 

 

 

 

 

Resume - Contact 섹션

 

Contact 섹션에 누락된 유효성 검사를 추가했다. 시맨틱 요소를 지켜 HTML을 작성했기 때문에 input 요소에 required 속성을 할당했고, 별도로 js 작성을 통해 해당 필드값들이 자연스럽게 작성되도록 유도하도록 구성했다.

테스트 이메일을 쓰면서 전체적인 작동을 확인해 봤다. emailJS가 연동된 계정으로 메일을 보내주지만 어떤 이유에선지 자동으로 휴지통으로 보내지는 문제가 발견되었다. 추가로, 유효성 검사가 중복되는 부분이 있기 때문에 차별성을 두거나 삭제하는 것이 낫다는 생각이 들었다.

 

 

 

 

 

 

Projects 페이지

 

고민을 정말 많이 했던 부분이다.

진행했던 프로젝트를 효과적으로 보여주기 위해 프로젝트 페이지를 이력서 페이지에서 분할했다.

여기에 화면정의서와 비슷한 느낌으로 이미지마다 다른 설명이 보이도록 설정해 가독성을 높였다. 디자인은 flexbox와 고정된 width값을 통해 전체적인 마진을 정리했고, 주요 기술스택도 이전에 활용했던 shields.io 배지를 추가해 어떤 기술 스택이 사용됐는지 별도로 표시했다.

해당 페이지를 작업하면서 vanilla JS의 큰 단점을 느꼈는데, 컴포넌트를 반복적으로 사용하지 못하기 때문에 전체적인 코드가 길어진 부분이 가독성을 떨어뜨렸다.

React처럼 state값을 활용한 조건부 랜더링을 사용해 해결할 수 없기에, 모든 설명을 하나의 div 안에 묶은 뒤 display: none 속성을 활용한 뒤 인덱스 번호를 기록해 슬라이드와 동일한 인덱스 번호로 설정한 클래스명에 .active 클래스를 추가했다. (예시 코드 참조) active 클래스에는 display:block 으로 css 설정을 해 놓았다.

이 외에도 클릭 시 이전 인덱스 번호의 내용을 삭제시키는 등의 로직을 적용해 슬라이드마다 다른 설명과 번호가 보이도록 설정했다.

하지만 해당 페이지가 어떤 페이지인지 알기 모호한 부분들이 있었고, 글이 길어지기 때문에 집중력이 떨어지는 부분에 대한 개선이 필요했다.

 

사용된 코드 일부분

p1Slides.forEach((slide, idx) => {
    slide.style.transform = `translateX(${100 * (idx - p1currentIdx)}%)`;
    p1SliderPageName.textContent = `${p1SliderPageNames[p1currentIdx]}`;
    // 현재 인덱스 값을 고려해 querySelector를 통해 active class 추가
    document
      .querySelector(`.p1_desc${p1currentIdx + 1}`)
      .classList.add("active");
  });

 

추가 개선 사항
- 전체적으로 어색한 워딩 수정 및 맞춤법 검사
- 정적인 디자이 개선을 위해 적당한 딜레이의 애니메이션 추가
- Nav 메뉴를 제외한 링크들이 새 탭에서 열릴 수 있도록 설정
- emailJS 오류 해결 및 유효성 검사 중복 삭제 또는 수정
- 프로젝트 페이지 및 다른 페이지들의 전체적인 마진 조정
- mobile-first 디자인 만들어 반응형 웹 구축

 

 

Vanilla JS 최종 배포 (3차 배포)

 

 

Vanilla JS 단계에서 최종적인 배포를 마쳤다.

 

이후에도 버그 또는 이슈가 발견된다면 지속적인 유지/보수를 할 예정이지만, 특별히 고쳐야 할 사항이 없다면 리팩토링보다는 React로의 마이그레이션을 준비할 예정이다. 이 글을 쓰는 현 시점에서도 몇가지 자잘한 이슈가 발견되어 Hotfix로 수정했다...

 

1차 배포 때에 비하면 배경을 제외하고는 거의 모든 것이 달라졌는데, 장족의 발전이었다고 생각한다.

 

1. 애니메이션 추가

 

가장 먼저 보이는 랜딩 페이지는 순차적인 애니메이션을 사용했고, 나머지 페이지들은 더 간결한 애니메이션만 추가했다.

 

웹 페이지가 너무 밋밋하지 않고 복잡하지 않은 UX를 제공하기 위한 부분에 초점을 두고 디자인했다.

 

이 과정에서 기존 애니메이션의 속도가 조금 답답하게 느껴질 정도로 느리다는 테스트 사용자의 의견을 들어 전체적인 애니메이션 속도를 빠르게 조정했다.

 

2. Home - 랜딩 페이지 수정

 

랜딩 페이지에는 2차 배포에 사용 중이던 페이지 링크를 보존하기로 결정했다.

 

추가로 기존의 이력서 About Me 섹션에 포함되어 있던 링크도 이동시켜 홈 화면에서도 모든 링크에 접근이 가능하도록 배치했다.

 

상단 Nav 메뉴에 포함되어 있지 않은 링크들은 이전에 받은 피드백을 수렴해 target="_blank" 속성을 추가해 문제를 해결했다.

 

3. Resume - 이력서 페이지 수정

 

태블릿 사이즈 웹 페이지

 

About Me 섹션에도 랜딩 페이지에서 사용했던 외부 링크를 똑같이 사용했다.

 

정보를 더 자주 노출시키고, 다양한 페이지에서 사용할 수 있는 링크가 있어야 보다 편한 UX를 제공할 수 있다고 생각했다.

 

 

기술 스택 섹션은 피드백을 반영해 배지를 삭제하고 아이콘과 텍스트를 사용하는 디자인을 채택했다. 아이콘은 외부 라이브러리 iconify를 사용해 추가했다. 

 

더불어 이전보다는 더 명확한 구현 범위 또는 개발 경험을 적어 더 명확한 사유를 적었다.

 

 

이력서 상으로 존재했으나 포트폴리오 웹 페이지에 누락되어 있던 Education, Carerr, Languages 섹션도 추가했다.

 

항목 표시는 css @counter-style을 사용했다.

 

 

Contact 섹션은 디자인을 유지하고 유효성 검사 로직을 개선하고 휴지통으로 연동된 메일이 처리되던 현상을 해결했다.

 

메일 오류는 emailJS에서 제공되는 .sendForm의 전달인자를 잘못 전달하고 있었기 때문에 발생했다.

 

공식 Documentation의 일부를 읽고 오해를 해서 발생한 문제로, 공식 문서에서 제공된 해당 코드에서 getElementById를 통해 HTML 요소가 선택되었기 때문에 this가 사용 중인 form을 가리키는 것을 완전히 이해하지 못하고 있었다.

 

프로젝트에서 사용 중인 contact-form의 경우 window.confirm 기능을 활용해 추가적인 확인을 한 후 메일을 보냈는데, 이럴 경우 this가 contact-form이 아닌 window를 참조하고 있다는 것을 인지하지 못했던 것이다.

 

// const contactForm = document.getElementById("contact_form");
emailjs
      .sendForm("service_sms_portfolio", "template_sms_portfolio", contactForm)

 

따라서 코드를 위와 같이 수정해 정상적으로 이메일 전송 기능이 작동하는 것을 알 수 있었다.

 

 

4. Projects - 프로젝트 페이지 수정

 

 

먼저 포트폴리오 웹 페이지의 수정이 완료되었기 때문에 해당 내용을 프로젝트 항목에 추가했다.

 

이 외에도 마진들이 안 들어맞던 부분 등 디자인적으로 어긋나 보이던 부분들을 수정했다.

5. CSS 디자인

 

 

이전에는 반응형 웹 디자인을 고려하지 못한 css 스타일링이 많이 어긋난 부분들이 있었다. 피드백을 통해 이러한 부분들을 가장 먼저 수정했다. 각 페이지를 작업할 때 최초 스타일링은 모바일 사이즈에 맞게, 이후 @media 쿼리문을 통해 뷰포트 사이즈에 따라 디자인이 변동되록 했다.

 

초기 개발에서는 반응형 웹을 고려하지 못한 스타일링을 채택했기 때문에 css 파일들을 전체적으로 수정해야 했고, 기존에 존재하던 파일의 내용 상당수를 바꿔야 했기 때문에 헷갈리는 부분이 있어 시간이 오래 걸렸다.

 

초기에 왜 반응형 웹 디자인을 고려하지 못했는지 후회되는 순간이었다.

 

마치며

 

출처: 레딧

 

초기 개발에는 프로젝트를 너무 가볍게 생각한 것 같다.

 

나름의 로드맵을 통해 필요한 기능과 예상 시간을 측정해 프로젝트를 진행했는데, 맞아떨어진 부분이 매우 적다. 피드백 등을 수용하고 수정할 수 있는 시간을 충분히 고려하지 못한 것 같아 프로젝트가 예상보다 더 길어진 것 같다. 

 

React로 마이그레이션을 할 예정이지만 마이그레이션 이후로도 유지/보수가 필요한 부분들이 있을 것이기 때문에 프로젝트는 결코 끝났다고 할 수 없다.

 

하지만 드디어 개발자로서 나만의 웹 페이지를 가진 것이 매우 뿌듯하고 기쁘다.

 

지속적으로 가꿔나가 항상 더 나은 결과물을 위해 노력해야겠다.