변수 선언

변수(variable)는 간단히 말해 이름이 붙은 값.
기존에는 var만 있었는데 ES6에서는 let 과 const 가 새로 생겼다.

상수(constant)는 변수와 마찮가지로 값을 할당 받을 수는 있지만 한번 할당한 값은 바꿀 수 없는 모양

될 수 있으면 변수보다는 상수를 쓰는게 좋다고 한다. 상수를 사용하면 값을 바꾸지 말아야 할 데이터에서 실수로 값을 바꾸는 일이 줄어든다고 한다.
하지만 루프나 시간이 지나면서 값이 바뀌는 가변적인 데이터에는 변수를 써야하는 케이스 바이 케이스.

문자열 병합

ES6이전에는 변수나 상수를 문자열 안에 쓰는 방법은 문자열 병합 뿐이었음(+). ES6에서는 문자열 템플릿(template)이라는 기능을 도입. Interpolation이라고 부르기도 함

1
2

let currentTemp = 19.5;
const message = "The current temperature is" + currentTemp + "\u00b0c";

기존의 위와 같은 코드를 문자열 병합을 사용하면

1
2

let currentTemp = 19.5;
const message = `The current temperature is ${currentTemp} \u00b0c`;

이렇게 쓸 수 있는데 여기에서 문자열을 감싸고 있는 것은 `백틱(backtick)이라는 것을 명심!
중괄호 안에는 어떤 표현식이라도 쓸 수 있다.

여러줄의 문자열에는 이렇게도 쓸 수 있징

1
2
3
4

let currentTemp = 19.5;
const multiline = 'Current temperature : \n' +
    `\t${currentTemp}\u00b0c\n` +
    "Dont't worry...the heat is on!";

문자열 병합을 사용할 때에는 백틱, 따옴표를 섞어서 써도 무방
(근데 왜 DOM에는 글씨가 한줄로 나오나…. 콘솔이나 alert에서는 잘 나왔딩ㅜ)

symbol

심볼은 유일한 토큰을 나타내기 위해 ES6에서 도입한 새로운 데이터 타입.
심볼은 항상 유일. 객체와 유사하다.

심볼은 Symbol() 생성자로 만든다.

1
2
3

const RED = Symbol("The color of a sunset!");
const ORANGE = Symbol("The color fo a sunset!");
RED === ORANGE  //false : 심볼은 모두 서로 다름

우연히 다른 식별자와 혼동해서는 안 되는 고유한 식별자가 필요하다면 심볼을 사용하도록!

난관봉착

자바스크립트를 쓸 일이 없어서 알고리즘을 공부하고 있다.
이번 문제는 무작위 5개의 정수에서 4개를 뽑아 더하는데 그 합이 큰것돠 작은 것을 차례대로 도출하는 알고리즘이었다.

만약 배열이

1

var arr = [1,2,3,4,5];

가 되면 최소합 = 1+2+3+4 = 10, 최대합 = 2+3+4+5 = 14 이기 때문에 10 14를 도출하면 됨

그럼 배열에 있는 수를 다 더한 다음에 제일 작은 수를 빼면 최대합이 되고, 제일 큰수를 빼면 최대합이 되는거 아닌가!!! 빙고!!

뭔가 배열 중에 제일 큰 수를 골라낼 메소드가 있을 것이라 생각하고 검색에 들어가기 시작했다.

똑같은 맘, 똑같은 오류

일단 w3school에 Math object를 다시 한번 찾아본다. 옳거니

1
2

Math.min(0, 150, 30, 20, -8, -200);  // returns -200
Math.max(0, 150, 30, 20, -8, -200);  // returns 150

이런 방법이 있었다. 그럼 이렇게 하면 되는 것 아닌가.

1
2

arr.min()
arr.max()

하지만 실패. 검색을 하니 나와 같은 동지를 발견하게 되었다.
사람들이 그의 물음에 답변을 해주었는데 생각보다 답이 어려움….ㅁㅎㄷ

동공지진, 그리고 ES6

안타깝게도 내가 배웠던 자바스크립트 중에는 function을 쓰지 않고는 배열에서 가장 큰수, 작은 수를 도출하는 것은 어려워보였다.

1
2
3
4
5
6
7

 Array.prototype.max = function() {
  return Math.max.apply(null, this);
};
Array.prototype.min = function() {
  return Math.min.apply(null, this);
};

흠…..좀 더 쉬운 방법이 없을까 하는 중 눈에 띄는 답변

1
2

var min = Math.min( ...arr ),
    max = Math.max( ...arr );

세상에 마상에…

이건 ECMAScript 6를 이용한 방법! 마침 ES6에 대해서 공부할 계획이 있었는데 나쁘지 않은 시작이다.

wix

wix가 처음 생겼을 때 너무 센세이션이어서 나도 가입을 하고 둘러보기는 했으나 실제로 만들어 본 적은 없었다. 그러던 중 회사에 급하게 영문 홈페이지가 필요해서 간단하게 wix로 홈페이지를 만들기로 결정.

후다닥 만들어 보자.

참고로 이번에 제작하게 된 회사 영문페이지는 구체적인 자료보다는 스토리 위주의 글이 많았다. 평소에 하던 작업과는 많이 달라서 여러가지 오프라인 자료들도 많이 참고를 했다.

내가 받았을 때엔 페이지에 들어가야 하는 요소는 다 들어가 있었다.
하지만 걍 줄글만 있는 상황

왼쪽에 있는 추가 메뉴이다. 튜토리얼도 끝내지 않고 투입됐지만 그런건 필요 없을 정도로 알기쉽고 간편하다.

요소를 클릭하면 편집 버튼이 나오는데 여기에서 자유로운 편집이 가능하다.
클릭 앤 드랙그로 만들어지는 윅스는 바로 볼 수도 있고 저장 후 한꺼번에 개시할 수도 있다. 저장과 개시 기능이 나누어져 있다.

나는 wix를 써서 하루를 채 쓰지 않고 홈페이지 하나를 뚝딱 만들 수 있었다.

Wix 괜찮구나

• 간편한 사용이 가능하다. 드래그 앤 드롭 방식으로 기존에 코딩 방식으로는 한번 더 생각했을 레이아웃도 쉽게 구현할 수 있다.
• 애니메이션 효과를 클릭한번으로 간편하게 구현할 수 있다.
• 생각보다 다양한 기본 요소들을 제공하고 있다. 그림을 넣고 글자를 입력하는 것 또한 간편하다. 원한다면 통일된 스타일을 공통 요소에 입힐 수도 있음.
• 쇼핑몰이나 기타 포맷도 제공하고 있는데 생각보다 wix가 제공하는 틀 안에서 구현한다면 힘들지 않게 사이트 구축이 가능하리라 생각한다.

이런건 별로네

• 글로만 되어 있는 홈페이지여서 다행이라고 생각. 복잡한 요소가 들어가면 그 결과르 나는 장담하지 못할 것 같다. (복잡한 요소는 어울리지 않는다고 생각)
• 모바일 반응형 디자인도 제공하고 있는데 완벽하게 되진 않는다. 모바일 버전은 다시한번 손봐줘야 하는 상황.(하지만 이 부분은 기존 코딩 방식이 더 빡셀 것이라 예상)
• 화면이 축소되지 않고 실제크기에서 작업해야 하기 때문에 간격 위아래로 배치된 요소의 간격 등을 맞추기에는 좀 힘들다.

종합

빠르고 내용이 없는 홈페이지를 만들 계획이 있다면 wix도 괜찮은 대안. 하지만 무료일 경우 도메인을 따로 등록하지 못하고 홈페이지 하단에 wix로 만든 홈페이지라고 광고가 따라다닐 것이다. 결제를 해야 특정 url과 광고 free를 얻을 수 있으니 이 점 유념하셔서 작업 허시길!

주절주절…

디자인 하면서 HTML, CSS를 다룰 수 있는 사람들은 얼마나 많은가….
에이전시에 있으면서 그 안에 있던 디자이너들은 모두 퍼블리싱 정도는 할 수 있었다. 별로 특별하게 생각하지 않는다.

그러다보니 jquery도 사용하게 되고 쓰는데 어려움을 느껴 javascript까지 배우게 된다. 스터디 자료를 준비하면서 lodash를 처음 접하면서 cto께 배움을 청하였다. 친절하게 알려주시면서 조언을 해주셨다.

자바스크립트를 너무 깊이 안하셔도 될거 같다고… 필요하다면 lodash같이 편리하게 사용할 수 있는 것들이 있으니 그런것을 활용하고, 거기에 없는 것만 짜보시는 것이 어떻느냐. 복잡하지 않고 단순한 것부터. 그리고 jquery를 같이 쓰면서 눈에 보이면 더 재밌게 하실 수 있으실 거라고.

얘기를 듣고보니 내가 먼길을 돌아온건 아닐까 하는 생각이 든다. 다시 jquery를 살펴보게 되었다.

디자이너의 타이틀을 버리지는 않을 것이다. 그렇게 나는 어디까지 갈 수 있을까. 나는 어디까지 할 수 있을까. 어디로 가야하나….

다시 초심으로 돌아가서 이것 저것 일단 만들어봐야겠다.

문제인식

오늘도 신나게 디자인 작업을 하고 제플린에 작업물을 올렸는데 개발자분께서 물어오셨다.

작업 사이즈 어떻게 하셨나요?
이상하다. 분명 제플린에 잘 나와있을텐데. 개발자분께서 당연한 것을 물어오실리 만무하니 제플린을 황급히 확인했다. 맙소사 나는 한 페이지를 900x640으로 작업하여 올렸는데 제플린에서는 한페이지에 450x320으로 나와있었다. 딱 반이 되어서 해결방법을 찾기 전까지 개발자분께서는 계산기를 두려 숫자에 2배를 해가며 퍼블리싱을 하시는 사태가 발생했다.

원인

제플린에서는 density 즉, 밀도를 선택할 수 있다.
1x, 2x로 제공을 하고 2x를 선택할 경우 모든 단위의 숫자가 반토막이 나서 표시되게 된다.

해결

이건 단위를 바꾸는 것과 같이 삭제하지 않고 간단하게 클릭 몇번으로 해결 할 수 있다.
DASHBOARD화면에서 바꿀 수 있다. 오른쪽 옵션창을 보면 두번째 항목에 Density가 있는데 마우스 오버하면 버튼이 보인다. 여기에서 x1를 선택하면 디자인한데로 단위가 나온다.

정리

이 쓸데없는 기능은 무엇인가 하고 생각했지만 쓸모가 있겠지라고 생각해본다.
개발자에게 넘기기 전에 density를 한번 더 확인하자.

문제인식

디자인 작업을 끝내고 제플린에 무사히 Export를 했습니다. 개발자분께도 그 사실을 알려드렸는데 예상 밖의 요청이 들어오게 됩니다.

제플린에 나오는 기본 단위를 바꿔주실 수 있으신가요?

그제서야 확인해보니 제플린에서 기본 단위가 px이 아닌 dp였습니다.

아니 세상에 dp라는 단위는 도대체 무엇인가…거기에 폰트 사이즈는 sp였습니다. 세상에 마상에…

• 일단, dp와 sp에 대해서 알고 가도록 하겠습니다.
  dp(Density Independent Pixel), sp(Scale-independent Pixel)는 안드로이드에서 나온 단위입니다. 해상도에 관계없이 절대값이던 px과는 달리 해상도에 맞춰 깨지지 않고 나옵니다. 단위에는 dp, text나 line-height같은 글자관련 요소에는 sp를 씁니다.

굳이 단위를 바꿔서 해야 하나는 질문도 있습니다만 일단 바꾸기로 합니다.

원인

제플린에서 dp, sp로 단위가 나오는 이유는 처음 제플린에 export를 할때 설정을 잘못해서 그랬습니다. wep을 선택하면 px이 기본으로 나오지만 app을 선택하면 dp와 sp로 단위가 나옵니다.

위 그림에서 보시면 프로젝트 화면에서 Android라고 설정되어 있는 것을 볼 수 있습니다.

해결

제플린 유료 회원이시면 여러개의 프로젝트를 만들 수 있어서 새로 하나 만들면 됩니다만 무료회원이시라면 프로젝트를 삭제하시고 다시 만드셔야 합니다.
제플린에서 Create my first project를 누르시고 type를 설정하시는 창에서 wep을 선택해 줍니다. 그러면 px을 기본으로 하는 프로젝트를 생성할 수 있습니다. 참고로 pt단위를 쓰고 싶으시면 ios를 선택하시면 됩니다.

정리

제플린은 중간에 단위를 바꿀 수 없기 때문에 처음에 올리시기 전에 개발자와 단위에 대해서 상의하시는 것이 좋을 것 같습니다. 또한 한 프로젝트에 다양한 단위를 사용할 수는 없으니 필요하다면 제플린 유료 가입도 생각해 보셔야 할 것 같습니다.

문제인식

photoshop CC버전에서는 처음 시작할 때 웹, 인쇄, 모바일 등 작업을 선택 할 수 있는데 그것을 선택하지 않고 작업을 했을 시에 제플린에 추가가 되지 않았습니다. 즉, 레이어 단위로는 제플린에 추가가 되지 않는 것이죠. 폴더 단위도 마찮가지 입니다.

원인

원인을 찾기 위해 제플린의 확장 창을 봅니다. 제플린의 확장 창은 창 > 확장에서 찾으실 수 있습니다.

보시면 No artboard selected되어 있는 것을 볼 수 있습니다.
artboard는 대지입니다. 대지가 없어서 제플린에 추가되지 않는 것입니다.
참고로 제플린은 CC버전 이상에서 사용하실 수 있는데 CC버전 이하에서는 대지라는 기능이 없으니 당연하다고 할 수 있습니다.

해결

해결방법은 간단합니다. 대지를 추가시켜 주시면 됩니다. 대지는 레이어 창에서 추가 하실 수 있습니다.

옆에 단추를 누르시고 새대지를 추가하셔서 작업 사이즈에 맞게 조절하시면 됩니다.

정리

제플린은 대지 안에 있는 요소들을 인식하여 Export합니다. 제플린으로 개발자와 공유해야 하는 작업이라면 처음에 만드실때 웹이나 앱을 선택하시면 편리하게 작업하실 수 있습니다.

바야흐로 c3관련 포스팅을 하고 있을 때…
c3작업을 하면서 결과화면을 캡쳐해서 저장했다.

hexo s로 봤을 때에는 이미지가 잘 보였는데 deploy를 하고 url로 들어가 봤을 때 안보이는 사태가 발생. 아아..도대체 뭐가 문제인가…일단 들어가 있던 파일을 확인해 보았다.

public - css - images

안에 차곡차곡 잘 들어있었다. 태그도

![기본](/css/images/c3_06.jpg)

이렇게 이쁘게 들어가 있다! 그럼 도대체 뭐가 문제인가!
그러다가 이미지의 확장자 명이 JPG 대문자로 쓰여져 있는 것을 보았다. 설마…

했는데 설마가 맞음 ㅎㅎ
파일의 확장자 명을 소문자로 바꿀 수 없어서 포스팅의 코드를

![기본](/css/images/c3_06.JPG)

이렇게 대문자로 고쳤더니 이미지가 나왔다. ㅋㅋ
혹시 이런 문제가 있다면 디테일한 확장자명까지 다시한번 살펴보시길!

C3로 그래프를 그려보자.

1_ 저번 포스팅에는 준비를 했으니 이제 그래프를 그려봅니다.
다짜고짜 코드를 가져옵니다. 본문에는 차트가 들어갈 div를 마련.

1

<div id="chart"></div>

스크립트 넣는 부분에 적당한 예시의 코드를 가져온다.

1
2
3
4
5
6
7
8
9
10

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', 30, 50, 100, 230, 300, 310],
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 300, 200, 300, 250, 450]
        ]
    }
});

전에도 말했지만 c3와 d3는 서버에 올리지 않으면 잘 보이니 않는다. 그래서 바로 에디터에서 서버를 구동해서 볼 수 있는 live server preview 플러그인을 사용했다. (VS code기준)

그러면 이런 모습이 보여지게 된다.

아름답다. 반응형에 데이터 위에 마우스가 오버되었을 때 말풍선도 나온다~ㅇㅁㅇ!

2_ 데이터를 적용해보자
데이터를 넣는 방법은 아주 쉽다.

1
2
3
4

data: {
    x: 'x',
    url: 'data_01.csv'
}

데이터를 columns에서 url로 바꾸어주고 저장되어 있는 위치를 써준다. 하지만 이렇게 해서는 아직 그래프가 보여지지 않는다.

3_x축 정의
데이터에 X축이 같이 있기 떄문에 x축을 정의해준다. type에는 여러가지가 있는걸까. 암튼 data 레벨에 x축 범위에 대한 axis속성을 추가한다.

1
2
3
4

axis: {
    x: {
        type: 'category',
     },

그러면 이제 이런 모습을 볼 수 있게된다.

4_스타일 바꾸기
데이터가 입혀진 그래프를 그렸으니 이제 디자인 파일과 비교하면서 스타일을 다듬으면 된다.
일단 데이터 마다 점이 찍혀 있으니 그것을 빼보자.

1
2
3

point: {
    show: false
}

그리고 x,y축의 선이 너무 진한 것 같으니 css에서 선의 색을 조절해보자.

1
2
3
4
5
6
7
8
9
10
11
12
13

.c3 .c3-axis-x path,
.c3 .c3-axis-x line {
    stroke: #ddd;
}
        
.c3 .c3-axis-y path,
.c3 .c3-axis-y lines {
    stroke: #ddd;
}
        
.c3-ygrid-line.gridGray line {
    stroke: #ddd;
}

데이터 컬러의 색도 바꿀 수 있다. 특정 데이터의 색을 바꿀 수 있지만 간단하게 패턴으로 바꿔본다.

1
2
3

color: {
    pattern: ['#ff5f00', '#ffe082', '#80deeb', '#c4e0a6', '#bdaba3']
}

여기까지 하면 이런 데이터를 볼 수 있다.

5_ 마무리, 포멧 정리
이제 거의 다 한 것 같다. 마지막으로 x축과 y축 범위? 단위를 정리해주자.
y축의 단위가 %이기때문에 %를 추가해보자.axis아래에 x다음에 추가해주면 된다.

1
2
3
4
5
6
7

 y: {
    tick: {
        format: function(d) {
            return d + "%";
         }
    },
}

그리고 x축의 날짜도 다 보여 줄 필요가 없으니 줄일 수 있다. axis의 x에 추가하면 된다.

1
2
3

tick: {
    count: 7
}

마지막으로 y축의 그리드를 추가해줘야 하는데 그리드는 이렇게 추가할 수 있다.

1
2
3
4
5

grid: {
    y: {
        show: true
    }
}

그리드가 점선인데다가 여러개가 있어서 상당히 지저분해 보인다.
결국 특정 y값을 정해서 그 값의 그리드만 표현하기로.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

grid: {
    y: {
        lines: [{
            value: 0,
            class: 'gridGray'
        }, {
            value: 1,
            class: 'gridGray'
        }, {
            value: 2,
            class: 'gridGray'
        }]
    }
}

이렇게 되면 그리고자 했던 그래프를 만날 수 있다.

최종 코드는

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<!DOCTYPE html>
<html lang="ko">
<head>
    <style>
         .c3 .c3-axis-x path,
        .c3 .c3-axis-x line {
            stroke: #ddd;
        }
        
        .c3 .c3-axis-y path,
        .c3 .c3-axis-y lines {
            stroke: #ddd;
        }
        
        .c3-ygrid-line.gridGray line {
            stroke: #ddd;
        } 
    </style>
</head>
<body>
    <div id="chart"></div>
    <script>
        var chart = c3.generate({
            data: {
                x: 'x',
                url: 'data_01.csv'
            },
            axis: {
                x: {
                    type: 'category',
                    tick: {
                        count: 7
                    }
                },
                y: {
                    tick: {
                        format: function(d) {
                            return d + "%";
                        }
                    },
                }
            },
            point: {
                show: false
            },
            color: {
                pattern: ['#ff5f00', '#ffe082', '#80deeb', '#c4e0a6', '#bdaba3']
            },
            grid: {
                y: {
                    lines: [{
                        value: 0,
                        class: 'gridGray'
                    }, {
                        value: 1,
                        class: 'gridGray'
                    }, {
                        value: 2,
                        class: 'gridGray'
                    }]
                }
            }
        });
    </script>
</body>
</html>

현재 boolio라는 로보어드바이저의 전체적인 디자인을 담당하고 있다.
불리오는 간단히 펀드 자문을 한다고 말할 수 있는데 한달에 한번씩 추천 펀드를 내놓는다.
그것이 보고서의 형태로 나가는데 그 안에는 한달 동안의 수익, 추천 펀드, 일정 등이 같이 나가게 된다.

여하튼, 인디자인으로 매달 작업하던 것을 이제는 모바일과 웹 서비스로 자동화 시키는 프로젝트를 진행하고 있다. 그 서비스에 그래프가 존재하는 것은 당연했고, 일러스트로 그리던 그래프를 웹에 옮기는 작업이 필요했다.
여태 D3.js를 배우면서 그래프 그리는 연습을 했지만 D3는 자율도가 높은 반면 자바스크립트를 모르는 사람에게는 어느정도의 진입장벽이 존재.

D3로 시도는 해보았지만 그래프가 잘 나타나지 않았다. 거기에 반응형으로 디자인을 해야했기 때문에 난감했던 상황.

그 와중에 C3.js라는 D3기반의 좀 더 쉬운 라이브러리를 발견.

썰이 길었다. 이제 준비를 시작하자!

1_ C3.js를 살펴보자
c3는 나같은 사람들을 위해서 굉장히 쉽다. 기본이 반응형이고 디자인도 깔끔하게 되어있어 많이 손댈 필요도 없다. 다만 d3와 마찮가지로 서버에 올려야 확인이 가능하다는 단점이 있는데 이 부분은 데이터를 다른 파일에서 불러오지 않고 내부에 입력하면 확인 가능하다.

인덱스에서 보면 기본적으로 제공하는 디자인을 볼 수 있다. 깔끔하다.
메뉴의 examples에서 보면 다양한 예시의 그래프를 볼 수 있다.

c3에서 기본적으로 제공하고 있는 데이터들. 하나하나 들여다 보면 참 심플하고 예쁘다.
여기에서 내가 필요했던 것은 라인 그래프! 기본적으로 디자인 파일이 있다면 쓰기 더 쉬워진다.

나는 여태까지 썼던 그래프의 디자인(일러스트로 제작)이 있었기 때문에 그 그래프를 구현해 보기로 했다.

2_ 데이터 정리
한번 쓰고 말것이 아니라 매달 써야하기 때문에 나는 데이터 파일을 넣을 수 있는 포맷이 필요했다.
일단, 내가 가진 데이터는 엑셀로 있는 파일이었는데 엑셀 파일에서 제일 쉽게 변형할 수 있는 데이터 파일은 .CSV파일이다.

아래로 데이터가 나열되는 형태의 엑셀파일. 다른이름 으로 저장을 누르고 csv파일로 저장을 누른다.

그러면 들어갈 데이터 형태는 준비가 되었다.

3_ 그럼 c3를 코딩해보자.
c3는 d3를 기반으로 하고 있기 때문에 d3아래에 위치해야한다. 각 홈페이지에서 받아서 import시켜준다. c3는 스타일시트도 있기 때문에 그것도 받아서 같이 넣어준다.

1
2
3
4
5
6

<!-- Load c3.css -->
<link href="/path/to/c3.css" rel="stylesheet">
<!-- Load d3.js and c3.js -->
<script src="/path/to/d3.v3.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>

이제 준비는 다 끝났으니 다음은 진짜 c3로 그래프를 그리는 작업을 해보자!
커밍쑨!