<실제>
< '#'에 맞춰서 다음 슬라이드로 넘어가시면 됨.>
안녕하세요. NHN NEXT의, 최연소 참가자 19살 남세현입니다.
#저는 일정 공유가 핵심인 달력어플을 만들고있습니다.
#흠… 일정을 공유를 어떻게 해야할까요?
서버에서 처리하는거 말곤 없을까 생각하다가
다음 3가지가 떠올랐습니다.
#아이폰은 사진같은거 말고는 어플끼리 파일공유가 힘듭니다.
사람들이 많이 사용하는게 라인, 카톡인데요
라인 카톡으로 많이하는건 텍스트 보내기, #사진보내기 입니다.
#사진에 데이터를 녹여넣고, 그 사진을 메신저로 전달하면 어떨까요
#사진은 공용 저장소인 사진보관함에 저장되는데, 모든 어플에서 접근이 가능합니다.
기존엔 파일을 다운받아도 관리도 안되고 공유도 힘들고... 그것이 해결할 수 있습니다.
#어떻게 파일을 사진에 녹여내냐면,
모든 데이터는 이진수로 이루어져 있습니다. 그 이진수를 사진의 픽셀 RGB값에 대입하겠다는 겁니다.
#이것이 그렇게 해서 만든 사진데이터입니다. 저는 앞으로 이런걸 "사진데이터" 라고 부르겠습니다.
어떤 데이터가 담겨져 있을까요?
제가 말하기 전까지는 모릅니다.
몇천개의 인트형 정수가 저장되어있습니다.
#이게 어느 어플에서 저장한 데이터인지, 피피티자료인지 음악자료인지 알 수 없습니다.
컴퓨터를 쓸땐 파일에 '이름과 아이콘'을 붙입니다.
#파일 내부의 이진수 데이터는 인간이 읽을 수 없지만, #겉의 파일 이름과 아이콘으로 구분할수있습니다.
#그렇다면 이 사진데이터도 겉으로 봤을땐 사람이 읽을 수 있는 글씨이고, 컴퓨터는 데이터로 인식하게 만들면 되지 않을까요?
#이것이 바로 그렇게 만든 사진데이터입니다.
#밝기가 확실히 밝아졌죠?
#한 픽셀의, RGB값의 뺀 앞부분 #두 비트를 이용해서 사람이 노이즈 속에서도 글씨를 읽어낼 수 있게 할 수 있습니다.
#글씨가 있는 부분은 앞 두개는 무조건 11, 나머지 여섯개는 데이터의 이진수값. 반대로 글씨가 없는부분은 앞에는 00, 나머지는 데이터를 집어넣습니다.
#앞에 두 비트가 차지하는 명암의 비중이 75%나 됩니다. 아무리 뒤에 6비트가 커도, 화면밝기로 절대 따라갈 수 없습니다.
#사람은 명암 구분을 제일 잘합니다. 명암이 75%이나 차이나면 노이즈가 있음에도 글씨를 볼 수 있습니다.
그래서, 사진데이터에 파일의 속성을 글씨로 써줍니다.
#마치 바탕화면 보는것처럼 저게 무슨 사진데이터인지 파악할 수 있습니다.
#압축파일, 게임세이브데이터, 내스케줄, 음악, 에러로그, 초대권, 그 무엇도 다 이런식으로 저장할 수 있습니다. 일종의 QR코드 진화판이죠.
#저는 모든 개발자들이 쉽게 데이터를 사진으로 저장하고,
사진에서 데이터를 불러올 수 있는 api를 라이브러리 형태로 오픈소스 제공합니다.
#이것이 가지는 의미를 찾아봅시다
#파일. 자료는 사용자 자신이 주인이 되어서 스스로 관리할수 있어야 합니다.
#클라우드 시대가 왔다지만, 사용자경험을 고려하지 않은 디자인이 많습니다.
애플의 폐쇄성때문에 어플끼리 파일 옮기는게 힘들어서 대부분 클라우드와 URL을 통해서 작업합니다. 로컬이 단단하지 않은 상태에서 모든걸 클라우드에게 맞기겠다는 건 말이 안됩니다. #그때문에 일어난 불편함을 개발자와 사용자 둘다 느끼고 있습니다. 스마트폰은 특히나 네트워크 단절이 드문 기계잖아요
#그 누구도 파일을 보내기 위해서 클라우드 어플을
<실제>
< '#'에 맞춰서 다음 슬라이드로 넘어가시면 됨.>
안녕하세요. NHN NEXT의, 최연소 참가자 19살 남세현입니다.
#저는 일정 공유가 핵심인 달력어플을 만들고있습니다.
#흠… 일정을 공유를 어떻게 해야할까요?
서버에서 처리하는거 말곤 없을까 생각하다가
다음 3가지가 떠올랐습니다.
#아이폰은 사진같은거 말고는 어플끼리 파일공유가 힘듭니다.
사람들이 많이 사용하는게 라인, 카톡인데요
라인 카톡으로 많이하는건 텍스트 보내기, #사진보내기 입니다.
#사진에 데이터를 녹여넣고, 그 사진을 메신저로 전달하면 어떨까요
#사진은 공용 저장소인 사진보관함에 저장되는데, 모든 어플에서 접근이 가능합니다.
기존엔 파일을 다운받아도 관리도 안되고 공유도 힘들고... 그것이 해결할 수 있습니다.
#어떻게 파일을 사진에 녹여내냐면,
모든 데이터는 이진수로 이루어져 있습니다. 그 이진수를 사진의 픽셀 RGB값에 대입하겠다는 겁니다.
#이것이 그렇게 해서 만든 사진데이터입니다. 저는 앞으로 이런걸 "사진데이터" 라고 부르겠습니다.
어떤 데이터가 담겨져 있을까요?
제가 말하기 전까지는 모릅니다.
몇천개의 인트형 정수가 저장되어있습니다.
#이게 어느 어플에서 저장한 데이터인지, 피피티자료인지 음악자료인지 알 수 없습니다.
컴퓨터를 쓸땐 파일에 '이름과 아이콘'을 붙입니다.
#파일 내부의 이진수 데이터는 인간이 읽을 수 없지만, #겉의 파일 이름과 아이콘으로 구분할수있습니다.
#그렇다면 이 사진데이터도 겉으로 봤을땐 사람이 읽을 수 있는 글씨이고, 컴퓨터는 데이터로 인식하게 만들면 되지 않을까요?
#이것이 바로 그렇게 만든 사진데이터입니다.
#밝기가 확실히 밝아졌죠?
#한 픽셀의, RGB값의 뺀 앞부분 #두 비트를 이용해서 사람이 노이즈 속에서도 글씨를 읽어낼 수 있게 할 수 있습니다.
#글씨가 있는 부분은 앞 두개는 무조건 11, 나머지 여섯개는 데이터의 이진수값. 반대로 글씨가 없는부분은 앞에는 00, 나머지는 데이터를 집어넣습니다.
#앞에 두 비트가 차지하는 명암의 비중이 75%나 됩니다. 아무리 뒤에 6비트가 커도, 화면밝기로 절대 따라갈 수 없습니다.
#사람은 명암 구분을 제일 잘합니다. 명암이 75%이나 차이나면 노이즈가 있음에도 글씨를 볼 수 있습니다.
그래서, 사진데이터에 파일의 속성을 글씨로 써줍니다.
#마치 바탕화면 보는것처럼 저게 무슨 사진데이터인지 파악할 수 있습니다.
#압축파일, 게임세이브데이터, 내스케줄, 음악, 에러로그, 초대권, 그 무엇도 다 이런식으로 저장할 수 있습니다. 일종의 QR코드 진화판이죠.
#저는 모든 개발자들이 쉽게 데이터를 사진으로 저장하고,
사진에서 데이터를 불러올 수 있는 api를 라이브러리 형태로 오픈소스 제공합니다.
#이것이 가지는 의미를 찾아봅시다
#파일. 자료는 사용자 자신이 주인이 되어서 스스로 관리할수 있어야 합니다.
#클라우드 시대가 왔다지만, 사용자경험을 고려하지 않은 디자인이 많습니다.
애플의 폐쇄성때문에 어플끼리 파일 옮기는게 힘들어서 대부분 클라우드와 URL을 통해서 작업합니다. 로컬이 단단하지 않은 상태에서 모든걸 클라우드에게 맞기겠다는 건 말이 안됩니다. #그때문에 일어난 불편함을 개발자와 사용자 둘다 느끼고 있습니다. 스마트폰은 특히나 네트워크 단절이 드문 기계잖아요
#그 누구도 파일을 보내기 위해서 클라우드 어플을
다들 STL 잘 사용하고 계신가요?
오늘도 라태웅(NHN NEXT, NEXON)님의 발표입니다.
STL의 기본 개념부터, 사용 노하우까지 담아보았습니다.
여러분들도 우리 스터디 참여하셔서 Live로 들으시고 발표도 하러 오세요!
관련 문의 : 댓글 or https://www.facebook.com/gpgstudygogo
7. 지형을 만들어봅시다.
가장 좋은 지형 만들기 방법은?
◦ 디자이너가 일일이 다 만드는거
근데 문제점은?
◦ 비용이 비싸다.
(시간, 돈, 지루함)
◦ 용량이 크다.
좀 더 쉽게 지형을 만드는 방법
1. 노이즈를 만든다.
2. 근데 노이즈가 좀 괜찮아 보이게 만든다.
9. 단층 변형
1. Z(높이) 값을 저장하는 필드
필드
Field[x][y]
=
Height
처음엔 다 0으로 초기화
(0,0)
(Mx,
My)
(0,
My)
(Mx,
0)
10. 단층 변형
1. Z(높이) 값을 저장하는 필드
2. 선을 긋는다.
선 긋는 방법
1. 상 하 좌 우 중 2개 선택
2. 0부터 1까지 중 2개 고름
예를들어 (상,
0.5)
,
(우, 0.3) 이 골라
지면
점 1
:
(Mx
*
0.5
,
My)
점 2
:
(Mx,
My
*
0.3)임. 이으면 됨
Field
(0,0)
(Mx,
My)
(0,
My)
(Mx,
0)
11. 단층 변형
1. Z(높이) 값을 저장하는 필드
2. 선을 긋는다.
3. 선 기준으로 왼쪽에 있는 애들은
dHeight만큼 높이 증가
x,y가 선 왼쪽에 있는지 아는 방법
외적 이용해서 구하세요~
(x
-‐
X1)
*
(Y2
–
Y1)
–
(y
–
Y1)
*
(X2
–
X1)
이게 음수면 오른쪽, 양수면 왼쪽
Field
(0,0)
(Mx,
My)
(0,
My)
(Mx,
0)
여기 +dHeight
13. 단층 변형
1. 최종 결과물을 일단 만듬
2. 얘를 침식시킬거임
◦ 사포로 문지른다고 생각하면 됨
14. Low Pass Filter
필터링을 해야함
1. Low
Pass
Filter
2. High
Pass
Filter
필터링 : 없애는거.
DELETE. 죽여버리는거야 아주 그냥 아주!
Low
Pass
à
주파수 낮은걸 필터링 안하고 패스시킴
à 주파수 낮다 = 잘 안변하는 것들. 베이스들 à 즉, 위에 나대는거 깎음.
High
Pass
à 주파수 높은걸 필터링 안하고 패스시킴
à 주파수 높다 = 활발한 애들
à 옛날 티비 보면 지지지직 거리죠? 아니면 통화 음질 안좋을때 자꾸 지지
직 거리죠? 걔넨 항상 계~속 지지직 거리죠? 그런애들 지우는거. 우리 음성
은 활발하게 움직이니까 필터링 안되고 패스되고.
15. Low Pass Filter
우리가 지우고 싶은거
◦ 급격한 변화를 없애고 싶음.
◦ 마치 사포로 튀어나온 모서리 깎듯.
◦ 튀어나온 모서리? 갑작스런 변화 à 높은 주파수.
◦ 그럼 우리가 써야하는건 Low
Pass
Filter
간단한 Low
Pass
Filter 방정식
Result(i)
=
k
*
Result(i-‐1)
+
(1-‐k)
*
data(i), -‐ 단 k
는 0~1
사이
1. i번째 필터링된 값은
2. i-1번째 필터링 된 값에 k 곱하고
3. 필터링 되기 전의 데이터 i번째껄 (1-‐k) 곱해서 더한거.
◦ 그러믄,
k가 1이면 너무 깎이고 0이면 하나도 안깎이겠네요?
17. Low Pass Filter
Data
data[MaxX][MaxY];
//data에 다 채워넣었음
k
=
0~1;
Data
filteredData[MaxX][MaxY];
for
x
=
0
~
maxX
for
y
=
0
~
maxY
filteredData[x][y]
=
k
*
filterData[x-‐1][y]
/2
+
(1-‐k)
*
data[x-‐1][y]
/2
+ k
*
filterData[x][y-‐1]
/2
+
(1-‐k)
*
data[x][y-‐1]
/2
예시임.
다르게 해도 됨
Before
22. 중점 높이 이동
1. 태초에 선이 있었습니다.
2. 중점을 올려줍니다.
적당한 상수 dHeight 를 만들고,
-‐ dHeight
/
2
~
+
dHeight
/
2
사이의 값을 더함.
23. 중점 높이 이동
1. 태초에 선이 있었습니다.
2. 중점을 올려줍니다.
3. 중점 of 중점을 올려줍니다.
4. while(true)
_3();
5. 근데!
±dHeight/2 의 사이값 더했잖아요,
그거 조금씩 낮추면 더 깔끔하게 나옴.
dHeight(i)
=
dHeight(i-‐1)
*
2^r
◦ r은 지형의 거칢 상수
34. 입자 침전 기법 - 칼데라
아이디어의 모티브는?
◦ 환태평양 화산대의 생성 과정
화산대엔 뭐가 있다?
◦ 칼데라
오른쪽 결과물에 칼데라를 넣어보자
35. 입자 침전 기법 - 칼데라
아이디어의 모티브는?
◦ 환태평양 화산대의 생성 과정
화산대엔 뭐가 있다?
◦ 칼데라
오른쪽 결과물에 칼데라를 넣어보자
1. 선을 긋는다
36. 입자 침전 기법 - 칼데라
아이디어의 모티브는?
◦ 환태평양 화산대의 생성 과정
화산대엔 뭐가 있다?
◦ 칼데라
오른쪽 결과물에 칼데라를 넣어보자
1. 선을 긋는다
2. 선을 기준으로 뒤집는다
if(
H
LineHeight
)
H
=
2*LineHeight
-‐
H
