컴퓨터와 마우스만 있다면 어디든 갈 수 있어
10년짜리 여권이 썩고 있다. 여권 발급할 때는 예쁜 도장들로 다 채워주리라 마음먹었지만 결국 이렇게 되어버렸다. 그러나, 21세기 놀라운 천재들은 발이 묶였다고 여행을 포기하지 않았고, 랜선 여행이라는 문화를 만들어 냈다. 랜선 여행이란, 온라인 공간 속에서 세계 각국을 여행한다는 뜻이다. 물론 직접 보고 느끼고 맛보는 여행과는 비교할 수 없겠지만 나름 좋은 보완재가 될 수 있다고 생각한다. 오늘의 글에서는 랜선 여행의 대표주자 구글 어스에 대한 소개와 구글 어스의 프론트엔드를 맛보기로 분석해보고자 한다.
구글 어스
Google Earth, 구글에서 제공하는 지도 프로그램으로, 2005년 6월 28일부터 배포된, 전 세계의 모습을 위성사진으로 볼 수 있는 프로그램이다. 구글 내비게이션과 함께 지리정보, 지형정보, 건축 업계에 혁명과도 같은 프로그램으로 등극하였다. 본질적으로 어떤 지도보다도 기본적인 면에서는 정확한데, 이는 지구본처럼 입체인 지구를 3D로 묘사했기 때문이다. 여기에 더해서 이 프로그램으로 원하는 지역의 위성사진뿐 아니라 구글 어스 사용자가 올려둔 특정 지점의 사진이라든가, 명승이나 유명한 곳의 위치 등도 알 수 있다.
구글 어스로 여행 가기
구글 어스로 어떻게 랜선 여행을 갈 수 있을까. 구글 어스는 2D, 3D 뿐만 아니라 구글 어스 사용자가 올려둔 특정 지점의 사진을 찾아볼 수 있다. 이로 인해 사용자는 현장감 있는 사진을 통해 랜선으로 여행을 떠나는 경험을 할 수 있다. 또한, 일부 박물관의 경우 내부 스트리트뷰도 지원하고 있어서 집에서 박물관을 관람할 수도 있다.
🛬 구글 어스로 프랑스 루브르 박물관에서 모나리자 감상하기
구글 어스에서 검색 버튼을 클릭하면 지명을 검색할 수 있다. 지명 검색은 한국어, 영어 모두 지원 가능하다. 루브르 박물관을 검색하게 되면 프랑스 파리의 루브르 박물관에 관한 간단한 설명이 제공되고 해당 지역으로 화면이 줌인된다. 만약 해당 지역이 3D 맵이 지원되는 지역이라면 위와 같이 입체적인 지도를 확인할 수 있다. 상당히 간편하게 루브르 박물관에 도착했다. 다음은 모나리자 감상하기. 루브르 박물관은 아쉽게도 박물관 내부의 스트리트 뷰가 제공되지 않는다. 이럴 경우, 구글 어스의 사용자가 업로드한 사진을 찾아볼 수 있다.
우측 하단에 사람 모양 버튼을 클릭하면, 구글 어스에서 제공하는 스트리트 뷰와 구글 어스 사용자가 업로드한 사진을 볼 수 있다. 스트리트 뷰는 '선'으로 표현되고, 업로드한 사진은 '점'으로 표현된다. 점을 클릭하면 해당 위치의 360도 파노라마뷰를 볼 수 있다. 위의 영상은 몇 번의 시도 끝에 찾은 모나리자 사진인데, 다른 사진들에 비해 비교적 한가로운 모습이다. 이렇게 해서 미션 성공! 지명을 직접 검색해서 하는 여행뿐만 아니라 구글어스에서 제공하는 테마여행, 랜덤 여행도 떠날 수 있다.
이제 구글 어스에 대한 설명을 마치고 구글 어스의 프론트엔드 맛보기로 넘어가 보자.
프론트엔드
프론트엔드란, 사용자는 웹 사이트 또는 웹 애플리케이션의 URL을 입력하거나 모바일 애플리케이션을 다운로드할 때, 아주 깔끔한 레이아웃을 가진 인터페이스를 보게 된다. 이렇게 사용자가 마주 보는 인터페이스를 테크놀로지 분야에서 ‘프론트엔드’라고 부른다. 프론트엔드 개발은 주로 웹 및 모바일 솔루션의 사용자 인터페이스(UI)와 사용자 경험(UX)을 만드는 데 초점을 맞추고 있다. 슬라이더, 드롭다운(drop-down) 메뉴, 레이아웃, 폰트, 컬러 등 모든 요소가 프론트엔드 개발을 이루는 부분이다. 프론트엔드 개발에 사용하는 주요 언어는 크게 HTML / CSS / Java Script로 나뉘어 있고, 아래 그림으로 설명할 수 있다.
HTML (Hyper Text Markup Language)
- 뼈대, 신체 골격
- 콘텐츠의 레이아웃을 제어
- 웹 페이지 디자인을 위한 구조 제공
- 모든 웹 페이지의 기본 빌딩 블록
CSS (Cascading Style Sheets)
- 피부, 외형
- 페이지 요소에 스타일을 적용
- 웹 페이지를 반응형으로 만들기 위해 다양한 화면 크기를 대상
- 주로 웹 페이지의 "모양과 느낌"을 처리
Java Script
- 근육과 신경계
- 웹 페이지에 상호 작용 추가
- 복잡한 기능 및 기능 처리
- 기능을 향상시키는 프로그래밍 코드
구글 어스 프론트엔드 맛보기
구글어스의 URL을 클릭하면 로딩 화면 이후 지구본 모양이 나타난다. 위 페이지에서 [F12]를 누르면, 위와 같은 개발자 코드를 볼 수 있다.
구글 어스 HTML
구글어스의 기본 HTML 구조는 다음과 같이 구성되어있다. HTML 문서의 기본 구조는 <head>와 <body>로 나뉜다. <head>에서는 문서의 형태, 타이틀 정보, 스타일 정보, JS에 대한 정보가 들어가 있다. <body>에서는 정보 전달을 위한 데이터가 들어가 있으며 화면에 직접 출력되는 부분이 나와 있다.
<html dir = "ltr" lang ="ko">
<head>...</head> == $0
<body class>...</body>
</html>
HTML <body> 구성요소
<body>의 구성요소를 살펴보기 위하여 [F12] -> [Ctrl+shift+c] 를 입력하면 화면의 구성요소에 대한 코드를 쉽게 찾을 수 있다.
<div id= "wasm-container">
구글 어스의 지구본 캔버스
<div id="wasm-container">
<canvas tabindex="-1" id="canvas" aria-label="Google 어스 지구본입니다." role="application" width="1016" height="1009" style="width: 1016px; height: 1009px; cursor: default;">
</canvas></div><earth-toolbar>
구글 어스의 메인 툴바 : 메뉴, 검색, 피드, 랜덤, 프로젝트, 지도 스타일, 측정
<earth-toolbar id="toolbar" role="toolbar" aria-labelledby="main-toolbar-aria-label" aria-orientation="vertical"></earth-toolbar><bottm-toolbox>
구글 어스의 하단 툴 박스 : 위치표시 추가, 선 또는 도형 그리기
<div id="bottom-toolbox">
<earth-gm2-button id="snapshot-view-button" has-icon="" raised="" filled="" hidden="" role="button" tabindex="0" animated="" elevation="1" aria-disabled="false"><iron-icon icon="earth-icons:snapshot-view" slot="leading-icon"></iron-icon>
<earth-i18n msg="snapshotView">현재 보기 캡처</earth-i18n></earth-gm2-button>
<earth-imagery-catalog-controls id="earth-imagery-catalog-controls" hidden="">
</earth-imagery-catalog-controls><earth-play-mode-controller id="play-mode-controller"></earth-play-mode-controller>
<earth-drawing-tools id="earth-drawing-tool"></earth-drawing-tools><earth-image-attribution id="street-view-pano-attributions" hidden="true"></earth-image-attribution></div><earth-navigation-elements>
구글 어스의 네비게이션 : 줌인 줌아웃, 나침반, 3D/2D, 스트릿 뷰, 현재 위치, 글로벌 네비게이션
<div id="earth-navigation-elements">
<earth-zoom-buttons id="zoom-buttons" gm2-style="" style="display: block;"></earth-zoom-buttons>
<earth-compass id="compass" gm2-style="" class="mini" mini="true"></earth-compass>
<earth-hover-button id="hover-button" gm2-style=""></earth-hover-button>
<earth-street-view id="street-view" gm2-style=""></earth-street-view>
<earth-my-location id="my-location" gm2-style=""></earth-my-location>
<earth-nav-globe id="nav-globe" gm2-style="" aria-hidden="true"></earth-nav-globe>
<earth-tooltip id="nav-globe-tool-tip" for="nav-globe" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none;"><paper-tooltip aria-hidden="true" id="nav-globe-tool-tip-paper-tooltip" role="tooltip" tabindex="-1" style="left: -264.641px; top: -103px;"><earth-i18n id="nav-globe-tooltip-text" msg="fullNavGlobeTooltip">클릭하여 우주를 확대하거나 드래그하여 특정 장소로 비행합니다.</earth-i18n></paper-tooltip></earth-tooltip></div><earth-view-status>
구글 어스의 상태바 : 구글 로고, 로딩 인디케이터 및 진행률, 이미지 및 데이터 저작자 표시, 현재 축척 막대, 카메라의 해발고도, 커서 바로 아래 있는 지점의 좌표
<earth-view-status role="toolbar" aria-labelledby="view-status-toolbar-aria-label" style="--earth-view-status-scale-bar-max-width-lpx:200px; --earth-view-status-scale-bar-width-lpx:177px;">
<div id="progress"><paper-spinner-lite id="earth-loading-spinner" active="" hidden=""></paper-spinner-lite><div id="earth-fully-loaded-circle"></div><span id="percentage-text" aria-labelledby="percentage-text-tooltip-text">
<paper-tooltip fit-to-visible-bounds="" for="percentage-text" role="tooltip" tabindex="-1" style="left: 86.1719px; bottom: 38px; top: auto;"><earth-i18n id="percentage-text-tooltip-text" msg="percentageTextDescription">장면 로드 진행률</earth-i18n></paper-tooltip></div>
<div id="copyrights" aria-labelledby="copyrights-tooltip-text"><span class="copyrights-item">Data SIO, NOAA, U.S. Navy, NGA, GEBCO</span><span class="copyrights-item">Landsat / Copernicus</span><span class="copyrights-item">IBCAO</span><dom-repeat style="display: none;"><template is="dom-repeat"></template></dom-repeat></div>
<div id="scale-bar-container" aria-labelledby="scale-bar-tooltip-text"><div id="scale-bar"><div id="scale-bar-text"> 7,000킬로미터</div></div></div>
<div id="coordinates"><earth-i18n id="camera-altitude" aria-labelledby="camera-altitude-tooltip-text" msg="cameraAltitude">카메라: 63,170킬로미터</earth-i18n><paper-tooltip fit-to-visible-bounds="" for="camera-altitude" role="tooltip" tabindex="-1" style="left: 684.242px; bottom: 37px; top: auto;"><earth-i18n id="camera-altitude-tooltip-text" msg="cameraAltitudeDescription">카메라의 해발 고도</earth-i18n></paper-tooltip><span id="pointer-information"><span id="pointer-coordinates" aria-labelledby="pointer-coordinates-tooltip-text">
7°04'32"N 93°41'41"E
</span><paper-tooltip fit-to-visible-bounds="" for="pointer-coordinates" role="tooltip" tabindex="-1"><earth-i18n id="pointer-coordinates-tooltip-text" msg="pointerCoordinatesDescription">커서 바로 아래에 있는 지점의 좌표</earth-i18n></paper-tooltip><span id="pointer-elevation" aria-labelledby="pointer-elevation-tooltip-text" hidden="">
-14,064미터
</span><paper-tooltip fit-to-visible-bounds="" for="pointer-elevation" role="tooltip" tabindex="-1"><earth-i18n id="pointer-elevation-tooltip-text" msg="pointerElevationDescription">커서 바로 아래에 있는 지점의 해발 고도</earth-i18n></paper-tooltip></span></div>
</earth-view-status>구글 어스 CSS
다음은 구글 어스의 CSS를 확인해 보고자 한다. CSS는 HTML의 구조 위에 스타일을 입혀 꾸며주는 것이다. CSS 요소를 살펴보려면 <style>을 검색해서 확인할 수 있다. CSS는 각 요소에 대한 컬러, 폰트, 배경색, 사이즈, 패딩 등을 지정한다.
CSS 개요
크롬의 개발자 도구 - 실험실 - CSS 개요
구글 어스의 CSS 개요는 다음과 같다. 구글 어스에서 사용된 총 요소 480개, 사용된 색상들과 색상 코드, 사용한 글꼴 정보 등을 깔끔하게 보여준다.
구글 어스 Java Script
마지막으로 구글 어스의 자바 스크립트를 확인해 보자. 자바 스크립트는 웹 페이지의 상호작용을 담당하는 스택으로 사용자의 동작에 따라 웹페이지를 동적으로 변환하는 역할을 한다. 앞서 예시로 들었던 구글 어스로 랜선 여행 가기에서 동적 요소 (검색, 팝업창, 콘텐츠, 지리정보, 2D, 3D 그래픽 등)를 구현한다.
자바 스크립트의 요소를 보기 위해서는 해당 요소의 '이벤트 리스너'를 확인하여 각 요소에 일어나는 이벤트와 JS를 확인할 수 있다.
검색
검색 창에서는 키워드를 입력하여 검색을 할 수 있다. 키보드로 텍스트를 입력하면 검색창에 즉시 입력되며 텍스트와 연관된 키워드들이 새롭게 생성된다.
<input>
Value(검색창) 속성의 값이 바뀔 때마다 발생하는 이벤트로 일반적으로 keyPress 직후에 value 속성이 바뀌면서 input 이벤트가 발생한다.
function Xk(a,b,c){if(c.listenerEvent){let d=c.parts[0];a.addEventListener(c.listenerEvent,function(e){var f=c.target,g=d.source;let k=e.detail,n=k&&k.path;n?(g+=n.slice(f.length),e=k&&k.value):e=e.currentTarget[f];b.__readOnly&&b.__readOnly[g]||!b._setPendingPropertyOrPath(g,d.negate?!e:e,!0,!!n)||k&&k.oea||b._invalidateProperties()})}}
팝업창
팝업창을 클릭하면 관련 정보를 추가로 제공받을 수 있다.
<click>
사용자가 요소를 클릭하면 실행된다.
this[c];void 0!==e&&(this.__data?this._setPendingProperty(c,e):(this.wh?this.hasOwnProperty("wh")||(this.wh=Object.create(this.wh)):this.wh={},this.wh[c]=e))}super._definePropertyAccessor(c,d)}_hasAccessor(c){return this.ee&&this.ee[c]}_isPropertyPending(c){return!!(this.__dataPending&&c in this.__dataPending)}}return b});const tk={"dom-if":!0,"dom-repeat":!0};let uk=!1,vk=!1;function wk(a,b){let c=b.parentInfo&&wk(a,b.parentInfo);if(c)for(let d=c.firstChild,e=0;d;d=d.nextSibling){if(b.parentIndex===e++)return d}else return a}function xk(a,b){a=a._methodHost||a;return function(c){if(a[b])a[b](c,c.detail)}}구글 어스를 웹으로 가져오는 방법
HTML 구조를 파악하면서 구글 어스의 지구본 요소가 "wasm-container"로 작성되어있었다. 그게 뭘까.
구글 어스는 원래 설치용 데스크톱 응용 프로그램이었다. 따라서, 구글어스는 C++ 네이티브 코드로 작성됐기 때문에 일반적으로 자바스크립트를 사용하는 웹브라우저 환경에 적합하지 않았다. 구글어스 개발팀은 웹에서도 구글어스를 사용할 수 있도록 2017년 구글의 오픈소스 기술인 네이티브 클라이언트를 활용해 구글어스 응용 프로그램을 개발했다.
다만 네이티브 클라이언트는 당시 C++ 코드를 웹에서 컴파일하고 실행할 수 있는 유일한 기술이지만 엣지, 파이어폭스 등 다른 브라우저는 지원하지 않았기 때문에 크롬 브라우저에서만 구글 어스를 활용할 수 있었다.
이후 웹 브라우저에 다양한 프로그래밍 언어를 활용할 수 있도록 돕는 웹어셈블리가 새로운 웹 표준으로 확정됐다.
wasm은 웹어셉블리의 약어이다.
WebAssembly
웹 어셈블리는 C나 C++와 같은 프로그래밍 언어를 컴파일해서 어느 브라우저에서나 빠르게 실행되는 바이너리 형식(0과 1로 이루어진 이진 형식)으로 바꿔주는 기술을 의미한다.
일반적으로 웹 어플리케이션을 개발할 때 사용하는 언어는 HTML/CSS/JavaScript이며, 그 중 JavaScript는 동적인 부분을 개발한다. 최근에는 JavaScript의 속도가 빨라졌지만 아직 C나 C++과 같은 언어들에 비해 느리다.
웹 어셈블리는 웹에서 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 실행되는 길을 제공한다. 웹 어셈블리 모듈을 웹앱으로 가져와서 JavaScript를 통해 사용할 수 있게 할 수 있다. JavaScript 프레임 워크는 웹 어셈블리를 사용해서 대규모 성능 이점과 새로운 기능을 제공하면서 웹 개발자가 쉽게 기능을 사용할 수 있도록 한다.
간단히 말해서 웹에서 네이티브(C/C++)에 가까운 성능의 프로그램을 실행할 수 있게 해주는 기술이다! (우선 여기까지)
맛보기도 어렵다.
HTML로 올록볼록 정도 할 줄 아는 나는 프론트엔드를 맛보기도 어려웠다. 그래도 맨날 잘못 눌러서 당황했던 [F12]를 내가 스스로 이렇게 많이 눌러보다니! 이제[F12] 잘못 눌러도 당황하지 않고 여유롭게 끌 수 있다!!
<이미지 출처 및 참고자료>
https://book.vanillacoding.co/starter-kit/step-1/html-css/css
📗 CSS의 역할 - Starter Kit
여러분은 지금까지 HTML에 대해서 어느 정도 배워보셨습니다. HTML은 텍스트나 이미지 등을 웹페이지에 보여주기 위해 굉장히 유용하게 사용되지만, CSS를 이용하여 우리는 더욱 예쁘게 웹페이지
book.vanillacoding.co
https://www.google.com/intl/ko/earth/
개요 – Google 어스
스토리 및 지도 만들기 With creation tools, you can draw on the map, add your photos and videos, customize your view, and share and collaborate with others.
www.google.com
https://zdnet.co.kr/view/?no=20200228124949
구글어스, 파이어폭스·엣지 등 크롬 외 브라우저 지원
크롬 외에선 사용할 수 없었던 3D 지도 서비스인 구글어스가 마이크로소프트 엣지, 파이어폭스, 오페라 등 정식 지원을 시작했다.미국 지디넷은 구글은 구글어스가 크롬을 지원한...
zdnet.co.kr
https://azderica.github.io/00-web-webassembly/
[WEB] Webassembly 정리 - Azderica
[WEB] Webassembly 정리 Posted 18. February 2021. 6 min read. WebAssembly 오늘은 웹어셈블리에 대해 간단하게 정리합니다. WebAssembly란? 웹 어셈블리는 C나 C++와 같은 프로그래밍 언어를 컴파일해서 어느 브라우
azderica.github.io
https://brunch.co.kr/@dmsgud95/35
'서핏' 랜딩 페이지 프론트엔드 탐색하기
[코드스테이츠 PMB 8] html, css, javascript | 스타트업 채용공고를 보다 보면 '프론트엔드', '백엔드'라는 개발 직군이 나온다. 무언가 앞, 뒷단에서 개발하는 것 같은 느낌이다. 이 직군을 이해하기 위
brunch.co.kr
'PMB 10기' 카테고리의 다른 글
| [W7D3] 개발자의 암호문 엿보기 (Feat. 네이버 Open API) (4) | 2022.03.10 |
|---|---|
| [W7D2] 모바일 앱 유형 정리 (1) | 2022.03.07 |
| [W6D4] 대체 불가능 토큰 NFT 데이터 초간단 시각화 (1) | 2022.03.03 |
| [W6D3] 일상 속 예술을 위하여, 핀즐 (0) | 2022.03.02 |
| [W6D1] 네이버 쇼핑 라이브의 Flow Chart 끄적이기 (0) | 2022.02.24 |
