개요

포트폴리오 사이트에 대해 유명하신 프론트엔드 개발자(강사님)에게 피드백을 들을 기회가 있었다.

(어떤 분인지는 선입견이 있을수 있으므로 밝히지 않는다. 매우 감사하게 생각하고 있다.)

이 분께서 제시하신 피드백에 따라 포트폴리오 사이트를 개편할려고 하여 정리해보고자 한다.

피드백 분석

피드백 내용을 어떤 부분에 대한 지적인지 자체 분석해 보았다.

• 프론트엔드는 웹사이트의 얼굴이다. 그러나 얼굴부터 신경쓰고 있지는 않는 것 같다.
• 프론트엔드 개발자는 브랜딩에 어느정도 관심이 있고 그 브랜딩에 있어서 매니아처럼 ‘호’가 있어야 한다.
• (위 두 가지는 피드백에 앞서 프론트엔드 개발자의 자세를 언급해주신 것 같다.)
• 처음 웹사이트를 들어갔을 때 파비콘을 보면 Vite로 만든 것이 바로 보여진다. 이 점에 대해 기술관 입장을 생각해 보았는가? → 파비콘 개선에 대한 조언
• 휴대폰에서 메뉴들을 엄지손가락으로 탭한다고 생각해 볼때, (불편하다) → 모바일 UI 탑메뉴 구성에 대한 조언
• 화면을 줄였을 때 우측 공간의 여백 → 모바일 UI 관련 조언
• 사이트가 채색톤이 흐리게 가져가는 부분은 초보 디자이너가 강한 색상을 선택하지 못해서 파스텔톤만 찍는 채색과 유사 → 포트폴리오 사이트 전체적인 컬러톤
• Welcome이라는 영어 단어가 끊겨져서 내려가는 부분, 그런 부분들은 어떤 단어에 대한 word-break나 이런 부분들에 대해 신경쓰고 있는가? → css의 word-break를 쓰지 않아 생기는 일에 대한 조언
• (Skills & Stacks UI 스샷을 보여주며) 행간을 이렇게 쓴다는 것은, 프론트엔드 개발자로써 line-height를 잘 관리 못하는 부분들이 보인다 → css의 line-height를 관리하지 않으면 생기는 일에 대한 조언
• (Projects UI 스샷을 보여주며) 링크일 것 같은 밑줄은 링크가 아니에요. 사용성이 없어보입니다. 차라리 강조 문구는 굵게 표현하는 것으로 끝내주시는게 좋을 것 같습니다. 여기도 line-height 잘 정리하시구요. → 위 지적과 일맥상통하며, ul li 사용시 line-height관리 및 underline등의 남발로 사용성이 불편함을 지적
• 그 외에 프로젝트 정리하신 부분이나, 여러가지 부분에서 사용성이 없어보입니다. 기술 면접관이 다 볼수 있을 것이라는 생각보다는 정환님을 잘 파악하기 위해서 큰 덩어리들로 보시고, 상세히 보고 싶은 부분은 추가 클릭으로 페이지를 따로 띄어내서 더 심도있게 볼 수 있도록 유도하는 안내가 필요합니다. → Projects UI의 사용성 측면에 있어 대략적인 개선이 필요. 상세 내용을 클릭하여 볼 수 있게 유도하는 UX에 대한 말씀을 하심 → 이부분은 현 포트폴리오와 이력서의 컨셉(클릭하여 상세 내용을 보는 액션이 없도록 구성함)을 다시 한번 얘기드리면서 서로간 이해
• (Skills & Stacks UI 스샷을 보여주며) 3년차에게는 이런 기술들은 필수로 이미 알고 있어야 합니다. 신입으로 지원하실 것이 아니라면, 어필이 되지 않을 것 같다는 생각입니다. 실제로 실력을 보충하시고, 자신감 있게 쓰시는 것을 추천드릴게요. → tailwind css를 학습 중 (x) ⇒ 사용하고 있다. 할 수 있다 정도의 수준이 되어야 함