kije park

박기제

Javascript Full-Stack Developer

소상공인 빅데이터 포털 프로젝트

소상공인 빅데이터 센터 프로젝트를 개발 하고 있습니다. 해당 프로젝트의 기획 및 프론트엔드 개발 범위, 기간등은 다음과 같습니다

  • 기획 기간 : 약 2.5주
  • 프로토타입 개발 페이지 수 : PC + Mobile 기준 약 150개 페이지
  • 프로토타입 제공 방식 : HTML5, CSS3, Javascript, Assets(Image, Icon, etc ..)
  • 프론트엔드 개발 기간 : 약 4주 예상
  • 프론트엔드 개발 범위 : 각 화면 별 페이지 퍼블리싱 및 자바스크립트 구현

벤치마크 : DataUSA

메인 페이지의 레이아웃 및 스타일을 DataUSA 를 벤치마킹하여 디자인을 요청받은것이 초기 컨셉이였습니다.

어떻게 하면 데이터 차트를 제공하는 사이트를 직관적이고 이해하기 쉽게 만들 수 있을까?


Look & Feel : 현대와 전통

DataUSA의 한국판 버전인 소상공인 빅데이터 센터를 만드는것에 있어서 한국적인 스타일로 기획하면 좋을것 같다고 생각했습니다, 해외 저작권 무료 사이트 에서 가장 트렌디한 이미지들을 선택해 페이지의 느낌에 맞는 이미지로 사용했습니다.

소상공인 빅데이터 포털 프로젝트 : 풀스택 개발자 박기제
메인 페이지 벤치마크 사이트 : DataUSA
소상공인 빅데이터 포털 프로젝트 : 풀스택 개발자 박기제
클라이언트 확인용 : 챠트 아티클 상세 페이지
소상공인 빅데이터 포털 프로젝트 : 풀스택 개발자 박기제
클라이언트 확인용 : 챠트 목록 페이지
소상공인 빅데이터 포털 프로젝트 : 풀스택 개발자 박기제
클라이언트 확인용 : 협단체 회원 관리 - 관리자 페이지
소상공인 빅데이터 포털 프로젝트 : 풀스택 개발자 박기제
클라이언트 확인용 : 상가 승인 관리 - 관리자 페이지

UX : 부드럽고 말랑말랑하게

각 기능들을 페이지로 나누어 많은 페이지 로드를 하는것 보다 팝업이나 버튼들을 통해 페이지 이동을 줄여 특정 인터페이스내 기능을 축소하여 제공하는게 사용자 경험에 있어 효과적이라고 생각합니다.


UI : 단순하고 쉽게

불필요한 디자인(이미지나 아이콘등.. )의 인터페이스들을 최소화 하고 화려한 색의 요소들은 한정하여, 사이트의 디자인이 아닌 컨텐츠에 집중할 수 있으며 동시에 세련된 디자인을 제공하는 인터페이스들을 기획했습니다

또한 모달 팝업등을 통하여 관리 및 설정 기능들을 최소한의 페이지 내로 기획을 하면 사용자 경험이 높아진다고 생각합니다. 짧고 효율적인 작업 동선 기획을 위해 초기 설계에 있어 고민하였습니다.

필요한 기능들을 그룹화 하고 사용자 액션(클릭, 페이지 로드등)들을 최소화하여 보다 단순하고 직관적인 UI를 설계했습니다

소상공인 빅데이터 포털 프로젝트 : 풀스택 개발자 박기제
클라이언트 확인용 프로토타입

프로토타입 : 사용자 경험과 생산성을 중심으로

Adobe XD 같은 프로토타입 제작툴을 사용하면 생산성이 높아지는것 같습니다. 빠르게 디자인을 설계하고 간단한 애니매이션을 적용하여 실제 결과물에 대해 예측할 수 있습니다.

클라이언트 확인용 UX 검토용 동영상

IA : 구글 스프레드시트로 공유

소상공인 빅데이터 센터를 진행하며 각 페이지 별 기획 및 기능 정리들을 위해 구글 스프레드시트를 사용하였습니다. IA를 작성하여 각각의 세분화된 기능에 대한 명세 및 기능 추가, 수정, 삭제등 유연하게 기획을 관리할 수 있어 프로젝트의 개발 기간을 줄여주며 클라이언트와의 유연한 협업을 할 수 있습니다.

소상공인 빅데이터 포털 프로젝트 : 풀스택 개발자 박기제
결과 : IA

현 프로젝트에 있어 중요한건 상대방이 원하는 수준의 결과물을 이해하고 개발하는것 같습니다, 해당 수준을 이해하면 프로토타입 개발이나 추가적인 기능 추가 혹은 수정에 대해 문제없이 진행될 수 있는것 같습니다

이 프로젝트를 정리하는 차원에서 블로그에 기록합니다.최종 결과물은 지금과 다르게 나오겠지만, 현재 진행중인 과정을 작성하므로써 스스로 부족한 부분을 보강하며 이후 더 나은 결과물을 만들 수 있도록 준비하려고 합니다.




4주

진행중

외부 프로젝트

프로젝트 정리 : IA, 화면 정의서
프로토타입 페이지 수 : 71 페이지
디자인 페이지 수 : 150 페이지
기타 : 최종코드 및 연동 설명서

2주

프론트엔드 개발

외부 프로젝트

HTML, CSS 개발
Javascript 개발
자원 파일 적용

2주

디자인 & 프로토타입

외부 프로젝트

와이어프레임툴 : 없음
프로토타입툴 : Adobe XD

1주

프로젝트 기획

외부 프로젝트

클라이언트 미팅
프로젝트 개요 확인
개발기간 및 예산 협의
프로토타입 페이지 확정
벤치마킹

  • Compatible Browsers : Firefox, Safari, Opera, Chrome, Edge
  • Compatible With : Bootstrap 4.x, Bootstrap 3.x
  • Files Included : HTML Files, CSS Files, JS Files, Assets
  • Layout : Responsive
  • True performance : Fully loaded Time : 1.2s

JavaScript 100%

HTML5 100%

CSS3 100%

Bootstrap 100%

Adobe XD 50%

Design 30%

풀스택 개발자 박기제 kije park

박기제

Kije Park| Javascript Full-Stack Developer

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

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