avatar

박기제

Javascript Full-Stack Developer

하이퍼맵 프로젝트

하이퍼맵 프로젝트를 개발했습니다. 현재 개발이 진행중이지만 중간 과정에서 느낀 점등을 적어 봅니다. 해당 프로젝트의 기획 및 프론트엔드 개발 범위, 기간등은 다음과 같습니다

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

벤치마크 대상 : 없음

지도 위에 그리드를 생성하고 기존 지도를 기반으로 API 레이어를 조합해 원하는 범위의 지도 위치 값을 구하여 해당 위치값에 원하는 형태의 데이터를 추출할 수 있는 서비스입니다

지도의 범위를 정하고 데이터를 추출하는 작업을 최대한 쉽고 게임처럼 만들자


Look & Feel : 누구나 쉽게 사용할 수 있게

메인페이지에 위치한 지도 영역의 네비게이션들을 조작하여 다양한 형태의 데이터를 선택 및 추출하는 방식의 UI입니다.

하이퍼맵 프로젝트
화면 정의서

UX : 엄청 쉽게

일반적인 데이터 추출 서비스의 경우 추출 조건 부터 추출 완료까지의 과정이 복잡합니다, 사용자의 경험도 좋지 않지만, 다양한 형태의 데이터를 얻기 위해서는 추출 과정 자체가 높은 수준의 조작을 요구합니다

하이퍼맵 프로젝트
사용설명서 없이는 하나도 작동하기 힘든 UI : 비행기 조작

기존 서비스들과 달리 특별한 메뉴얼 없이도 조작할 수 있는 인터페이스를 설계합니다


하이퍼맵 프로젝트
메인 페이지 : 50m×50m Square 다중 선택 기능

하이퍼맵 프로젝트
메인 페이지 : 100m×100m hexagon 다중 선택 기능

UI : 게임같이

지도의 범위를 설정하고 데이터를 추출하는것을 게임같이 할 수 있게 제공하기 위해 생각한 컨셉이 포토샵 같은 UI입니다. 모든 선택이 WYSIWYG로 제공되면 사용자 경험이 좋아질것으로 생각했습니다.

가장 걱정되는 부분은 지도 범위 선택시 생성되는 수 많은 레이어들이 퍼포먼스에 영향을 끼치지 않을까하는 부분이였습니다

하이퍼맵 프로젝트
클라이언트 확인용 프로토타입 파일

클라이언트 사이드 지도 레이어 처리(Polygon Clipping)

하이퍼맵의 특별한 지도 범위 선택 기능은 아래 이미지와 같은 4가지 집합체 범위 연산 기능입니다
지도에서 선택한 범위에 집합(set)을 적용한 범위를 추출해내는 방식입니다.
해당 기능을 자바스크립트 오픈소스를 사용해 개발했습니다. 클라이언트에서 범위 집합을 통해 결정된 범위 데이터를 서버로 요청하는 방식입니다.

하이퍼맵 프로젝트
클라이언트 확인용 프로토타입 파일

하이퍼맵 프로젝트
클라이언트 확인용 프로토타입 파일

아쉬운 점 : 라이브러리 대체

지도 범위 선택, 범위간의 집합 등 주요 기능들을 개발하였으나, 클라이언트의 요청으로 지도 서비스를 자바스크립트에서 처리하는 클라이언트 렌더링이 아닌 서버에서 지도 서비스를 조작하는 서버 렌더링 방식을 도입하자는 의견에 의해 작업된 자바스크립트 코드들이 더 이상 사용되지 않게 되어 아쉽습니다.



4주

진행중

외부 프로젝트

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

2주

프론트엔드 개발

외부 프로젝트

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

2주

디자인 & 프로토타입

외부 프로젝트

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

1주

프로젝트 기획

외부 프로젝트

클라이언트 미팅
벤치마크 사이트 URL 접수
개발 기간 및 예산 협의
프로토타이핑용 중요 페이지 확정

  • Compatible Browsers : Firefox, Safari, Opera, Chrome, Edge
  • Compatible With : Bootstrap 4.x, Bootstrap 3.x
  • Files Included : HTML Files, CSS Files, JS Files
  • Layout : Responsive

JavaScript 100%

HTML5 100%

CSS3 100%

Bootstrap 100%

Adobe XD 50%

Design 30%

박기제 kijepark

박기제

Kije Park| Javascript Full-Stack Developer

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

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