kije park

박기제

Javascript Full-Stack Developer

처음 만드는 개발자 포트폴리오 사이트


처음으로 저의 개발자 포트폴리오 사이트를 개발했습니다, 이 사이트에는 이전까지 개발해왔던 프로젝트들과 앞으로 진행되는 프로젝트들에 대해 정리하고 피드백을 받는 공간이 되었으면 합니다.
현 사이트를 개발함에 있어 목표했던 부분들은 다음과 같습니다.

  • 가볍고 빠른 사이트 로딩
  • 높은 수준의 글 가독성
  • 젊은 느낌의 Look & Feel
  • 검색최적화
  • 최소한의 개발 기간
  • 기획 기간 : 1일
  • 개발 기간 : 1주
  • 프로젝트 기여도 : 100%
  • 프로토타입 개발 여부 : 부

가볍고 빠른 사이트 로딩

개발자 포트폴리오 사이트에 있어서, 빠른 사이트 로딩과 가벼운 형태의 프로젝트가 필요하다고 생각했습니다. 방대한 기능이 필요하지 않았으며 백엔드 기술을 도입하지 않고 프론트엔드의 디자인 및 사용자 경험에 대신 집중했습니다. 그리하여 현 사이트는 서버가 없는 정적 페이지로만 이루어진 사이트입니다.


Contact Me 대신 Typeform 서비스로

특정 방문자가 저에게 연락하기 위한 수단으로는 메일 시스템 대신 Typeform을 사용했습니다. Typeform은 사이트 방문자에게 설문조사를 받고 관리할 수 있는 서비스입니다. Typeform을 사용하게된 이유는 첫번째로 디자인적인면과 쉽게 적용 및 관리가 가능한 설문조사 서비스를 쉽고 빠르게 사용할 수 있다는 점이였습니다.
https://typeform.com


Disqus 댓글

블로그 글에 댓글 기능을 Disqus를 통해 구현하였습니다. Disqus를 사용하여 쉽고 체계적으로 댓글 서비스를 제공하며 관리할 수 있습니다. 또한 Disqus의 댓글들은 각 댓글별로 고유 주소값을 갖고 있기 때문에 검색최적화(SEO)에도 효율적이며 이메일 알림과 같은 편리한 기능 또한 제공됩니다.
https://disqus.com


소셜 공유 API

소셜 공유 기능을 Sharethis를 통해 구현하게 되었습니다. 다양한 플랫폼을 지원하여 세련된 디자인의 공유 버튼 디자인을 얻을 수 있었습니다.
https://sharethis.com/


Optimage를 통해 이미지 압축

Optimage는 이미지 파일 압축 앱입니다. 별도로 다운로드 받아 맥에 설치하여 사용합니다, 포토샵으로 이미지를 생성 후 해당 이미지를 압축하여 사용하는 방식입니다.


박기제 개발자 개인 포트폴리오
포트폴리오 페이지
박기제 개발자 개인 포트폴리오
포트폴리오 페이지 : Modal
박기제 개발자 개인 포트폴리오
연락처 페이지 : 제가 자바스크립트 개발자라 자바스크립트 로고를 넣어봤습니다.
박기제 개발자 개인 포트폴리오
연락처 페이지 : Typeform

백엔드 없이 프론트엔드만 만들어 최대한 빠르게!


높은 수준의 가독성

트렌디한 해외 사이트들은 주로 폰트를 기준으로 화면 및 디자인을 구성하는것 같습니다. 자간 행간등 디테일한 조정들이 글의 가독성을 높입니다. 이러한 이유로 해외 유명 폰트들을 한글에 적용하게되면 엉성한 느낌이 나는거죠


한글 폰트는 Noto sans

글 가독성은 웹사이트에서 중요한 요소중 하나입니다. 디자인이 아무리 좋아도 글 가독성에 대한 고민이 없다면 글을 읽지 않게되고 컨텐츠에 집중하지 못하게됩니다. 본문의 메세지 전달은 주로 Noto Sans KR 100, 300를 사용하였고, 주목성을 끌어내는 헤드라인에는 Noto Sans KR 700을 사용하였습니다.


숫자와 영문은 Open Sans 적용

Noto sans의 단점은 숫자가 좋지 않다는점입니다. 그래서 숫자나 영문같은 경우에는 Open sans를 사용했습니다.
Open Sans


박기제 개발자 개인 포트폴리오
Blog
박기제 개발자 개인 포트폴리오
Resume

이력서는 타임라인 스타일 적용

이력서 Resume는 타임라인 스타일을 적옹해 날짜별로 어떻게 프로젝트 개발들을 해왔는지, 어떤 프로젝트를 하고 있는지를 직관적으로 확인할 수 있게 구성하였습니다. 이 서비스는 구글스프레드시트를 기반으로 서비스됩니다. 스프레드시트에 HTML 코드를 추가할 수 있기 때문에 원하는 디자인을 만들 수 있다는 장점이 있는 서비스입니다.

무엇보다 구글스프레드시트를 통해 실시간 업데이트 되는것이 가장 좋은점인것 같습니다.
knightlab.com


박기제 개발자 개인 포트폴리오
Resume : Timeline

젊은 느낌의 Look & Feel

의미없이 화려한 디자인은 지향하지 않습니다, 메세지나 컨텐츠를 효율적으로 보여줄 수 있는 디자인에 집중했습니다.
전체적인 색감은 두개로 구분했습니다. 컨텐츠 및 메세지 전달시에는 차분한 중성색 계열을 주로 사용했으며 주위를 끌어야하는 부분에는 형광색 색상을 사용했습니다. 그래서 전체적으로 젊은 느낌을 표현할 수 있었던것 같습니다.


사이트 Asset 최적화

자원 파일로는 Javascript, CSS, Images, Fonts등이 있습니다. 각 Javascript는 Minifed된 버전들을 호출하여 사용했으며, CSS 또한 Minifed된 버전을 사용합니다. 이미지의 경우 Optimage 앱을 통해 용량을 줄였습니다. 폰트의 경우 사용하는 크기 및 스타일만을 호출했습니다.

Inbound Link로 트래픽 유도

다른 웹사이트에서 제 개발자 사이트로 접속하게되는 링크들을 인바운드 링크(Inbound link)라고 합니다. 구글은 이런 인바운드 링크가 많은 포스트가 상위에 노출되도록 가중치를 부여합니다. 특히 좋은 트래픽은 소셜 미디어 유입(Facebook, Twitter)이 대부분입니다. 저는 많은 개발자분들이 활동하는 페이스북의 그룹 "생활코딩"과 Okky 커뮤니티 사이트에 포스팅하였습니다.

kije park
페이스북 생활코딩 그룹 공유
kije park
OKKY 사는이야기 커뮤니티 공유

부족한 제 개발자 포트폴리오 사이트를 평가해주시고 피드백해주신 많은 분들께 감사하다는 말씀드리고 싶습니다. 더욱 많은 지식들을 습득하여 많은 발전이루고자 합니다.


뭐든지 열심히!

개발자 포트폴리오 사이트를 만드는것에 사실 큰 시간과 에너지를 투자하고 싶지는 않았습니다. 하지만 제가 앞으로 진행하게 되는 프로젝트들에 대해 정리하는것이 다른 누군가에게 도움이 될 수도 있다고 생각하게 되었습니다. 또 저의 글들을 통해 뛰어난 멘토분들의 피드백 또한 들을 수 있다면 개발자 포트폴리오 사이트는 저에게 있어 좋은 기회라고 생각합니다.

그래서 개발자 포트폴리오 사이트를 개발하고 다시 진행중이던 회사 프로젝트에 집중하고자 했습니다. 디자인에 관련되어서 도움을 받아서 개발하였지만 준비한 만큼 만들어진 결과물에 대해 만족하게되어 기쁩니다.

또한 주로 회사 프로젝트만을 진행하여 실질적인 코드 리뷰나 오픈소스 프로젝트(Public)에 대해서는 현재 포스트가 없습니다. 하지만 추후에 여유가 생기는 시점이 오면 개인 프로젝트 및 오픈소스 프로젝트를 많이 진행할 의향이 있습니다

앞으로 많은 소통하고 지내면 좋을것 같습니다!


JavaScript 100%

HTML5 100%

CSS3 100%

Bootstrap 100%

Design 30%

풀스택 개발자 박기제 kije park

박기제

Kije Park| Javascript Full-Stack Developer

자바스크립트를 사용하며 좋아하며 새로운 기술에 관심이 많습니다. 스타트업 마인드, 성실한 태도, 긍정적이고 열린 가치관, 높은 목표에 끊임 없이 도전하는 근성, 빠른 속도의 개발 추구하는, 패션을 사랑하는 웹개발자 입니다.

높은 수준의 목표, 힘든 프로젝트는 항상 소중 합니다. 왜냐하면 어렵고 힘든 만큼 많이 배울수 있기 때문입니다.