Inspiration2008.03.29 17:28
토요일에 Daum에서 한 DevDay에 갔었습니다.

사실 멤버십의 행사와 겹쳐서 갈까말까 고민을 많이 했지만, 평소에 만들어 보고 싶던게 있어서 가게 됐습니다.
사실 상품도 상당히 기대 했지만, 경품은 전혀 타질 못했습니다. (기본으로 주는 512메가 USB 메모리만 ㅠㅠ)

어쨌든 원래 만들려고 했던건 AOL Air Player 같은걸 만들되, 검색이 되며, 여러 오픈 API를 지원하게 만드는걸 기본으로 할려고 했습니다.

그런대 이것저것 할 일이 요새 많이 생겨서 아침에 FlexBuilder3만 하나만 달랑 깔고 (2시간밖에 못자고 ㅠㅠ) 행사장에 가게 됐습니다.

만들려는 목표를 완벽하게 만들기는 시간이 너무 촉박하다고 생각 했는대, 다행히 비슷한 목표를 가진 안명규님와 이희덕군을 만나게 되어 같이 프로젝트를 진행하게 되었습니다.

그래서 안명규님이 PHP로 빠르게 Daum 동영상 검색 API에서 Flv를 추출하는 페이지를 만들어 주셨고, 이희덕군이 동영상 플레이 컴퍼넌트를 만들어 주셨습니다. 전 전체적인 UI를 잡고 동영상 리스트를 가져와 안명규님이 만들어 주신 페이지와 이희덕님이 만들어주신 동영상 플레이 컴퍼넌트를 연결하는 작업을 했습니다.

급조된 팀에 짧게 4시간 정도 되는 코딩 시간이라 결과물이 나오기 힘들꺼라고 생각 했는대, 팀원 모두 세미나도 듣지 않고 열혈 코딩을 하는 열정을 보여 주셔서 결과물이 나오게 되었습니다.

스크린샷은 아래와 같고, 소스와 .AIR 설치 파일이 올라가 있습니다. (FlV 추출부분은 문제가 될꺼 같아서 제외 했습니다.)
사용자 삽입 이미지

사실 저번의 DevNight 행사에도 참가 했었지만, (저번 행사때는 miniDaum을 만들었었습니다.) 이번 행사는 DevNight 행사보다 훨씬 많은 수의 결과물이 나온거 같았습니다.

또한 경품도 저번 행사보다 많은것 같군요.(전 한번도 당첨 안됐지만 ㅠㅠ)

재미있는 행사가 된것 같습니다. 다음에도 다음에서 행사가 열리면 또 참가해볼 생각입니다.

--- 추가글 ---

좀 웃기는 글이지만 Adobe Air의 SandBox 보안 모델을 깜빡 했습니다.
저 위의 플레이어는 Daum에서 나오니깐 작동이 안되는군요 -_-;
아무래도 DevDay때 됐던건 Daum 내부여서 됐나 봅니다;
열심히 삽질해서 PHP로 만들어진 flv 주소 가져오는 부분을 Actionscript3 버전으로 만들었는대,
다 만들고 막상 주소를 VideoDisplay 객체에 연결해서 플레이 시키려고 하니깐 SandBox 보안 모델 때문에 안되는군요 -_-; 이거 해결하는 방법 아는분이 있나요?;
신고
Posted by 양고기

댓글을 달아 주세요

  1. 즐거웠습니다.. ^^

    다음번에 또 뵈요.. ^^

    2008.04.02 13:46 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 헐~~ 가고 싶었는데 ㅠㅠ;;; (저 승훈이ㅠㅠ)

    2008.04.02 18:23 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 잇힝~ 제목에 오타 발견~

    2008.04.09 21:25 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 쿠로

    아마도 로컬에서 웹으로의 접속을 하는 바람에 SandBox 보안모델에 걸린것 같군요. 로컬이 아닌 웹에서 한번 해보시죠. 그리고 XML을 가지고 오는 부분에서 다음측이 크로스 도메인 설정이 되어 있지 않다면 이것역시 SandBox보안 모델에 걸립니다. 이것 같은 경우는 서버사이드로 해결할수 밖에 없을듯 하네요 ^_^;;

    2008.06.15 19:46 신고 [ ADDR : EDIT/ DEL : REPLY ]

Codes2007.12.17 05:20
구글에서 차트 API가 나왔습니다. 언제 나왔는지는 잘 모르겠지만 -_-;
새벽에 심심해서 open api들을 뒤지다가 이게 있다는걸 알게 됐습니다;;

근대 이 구글 차트 API 정말 물건이군요;; 아주 깔끔하게 차트를 그려 줍니다.


이게 Chart API로 방금 그린 Hello World chart 입니다. 정말 깔끔하지 않나요 -.,-;;

이 Chart를 그리는 방식은 다음과 같습니다.

http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

즉 GET 방식으로 파라메터들을 묶어서 날리면 알맞은 이미지가 날아오는 것입니다.

위의 헬로우 월드를 그린 URL은 다음과 같습니다.

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World
여기서 각 파트를 나눠서 설명 해보면 다음과 같습니다.
  • http://char.apis.google.com/chart? 는 구글 chart api의 주소이고.
  • &로 각 파라메터를 나눕니다.
  • chs=250x100은 chart의 크기를 픽셀단위로 나타냅니다. width x height  입니다.
  • chd=s:hW 는 차트의 데이터 입니다. 따로 설명 하겠지만 google chart api에서 데이터를 나타내는 방식에는 Simple, Text, Extended 3가지가 있습니다. 그 중 Simple 방식으로 쓴 데이터 입니다.
  • cht=p3 는 차트를 그리는 방식으로 여기서는 삼차원 파이 차트 입니다.
  • chl=Hello|World 는 차트의 데이터에 각 각 라벨을 입히는 구문 입니다. 테스트 해본 결과 아직 한글을 라벨링 할 수는 없어 보이더군요 -.,-.
이렇게 만들어진 URL을 <img> 태그의 src 속성에 그냥 넣어주면 깔끔하게 차트 이미지가 표시 됩니다 -.,-

위에서 나온 것처럼 차트에 데이터를 넣는 방식에는 Simple encoding, Text encoding, Extended encoding 의 3가지 방식이 있습니다.
각각의 방식은 chd=s: 에서 굵게 표시된 s의 자리에 각 s,t,e 의 문자로 표시 됩니다.

Simple encoding 은 알파벳과 숫자를 순서 대로 쓰는 것으로
A(0), B(1), C(2) ... Z(25), a(26), b(27), c(28) ... z(51), 0(52), 1(53), 2(54) ... 9(61)
이렇게 대문자 A부터 숫자 9까지 61단계로 데이터를 표시 할 수 있으며, 각 데이터는 콤마(,)로 나누어 집니다. 또한 빈 데이터는 언더바(_) 로 나타냅니다.

Text encoding은 0.0부터 100.0 까지 소숫점이 있는 숫자 1000단계로 데이터를 나타낼 수 있으며, 각 데이터는 콤마(,)로 나눠지며 데이터의 묶음이 한묶음 이상일 경우 파이프(|)로 나눠지고 빈 데이터는 음수 1(-1) 로 표시 됩니다.
chd=t:10.0,-1,95.0|30.0,8.0,63.0
예를 들어 위처럼  표시 됩니다.
 
Extended encoding은 Simple encoding의 한자리를 두자리로 확장 한것입니다.
A(0), B(1), ... Z(25), a(26), b(27), ... z(51), 0(52), 1(53), 2(54) ... 9(61), -(62), .(63)
한 자리에는 Simple encoding 의 문자에 하이픈(-)과 포인트(.)를 추가 하여 2단계 더 많은 64단계를 한 자리에 쓰게 됩니다. 여기에 2자리 이므로
64 * 64 로 4096 단계 까지 한 데이터에 쓸 수 있습니다. 각 데이터는 Simple과 마찬가지로 콤마(,)로 나뉘며, 언더바 두개(__)로 빈 값을 나타냅니다.
AA = 0, AZ = 25, Aa = 26, Az = 51, A0 = 52, A9 = 61, A- = 62, A. = 63
BA = 64, BZ = 89, Ba = 90, Bz = 115, B0 = 116, B9 = 125, B- = 126, B. = 127
.A = 4032, .Z = 4057, .a = 4058, .z = 4083, .0 = 4084, .9 = 4093, .- = 4094, .. = 4095.
위처럼 쓰게 됩니다.

차트의 데이터는 URL에 GET 방식으로 들어가므로 URL의 최대길이 안으로 써야 한다는 제약이 걸립니다. IE의 경우 대략 2000개 정도문자가 URL에 들어가며, 아파치에서는 4000문자 이상이 URL로 리퀘스트 되면 413 Entity Too Large 에러가 걸립니다. 그러므로 대강 2000 케릭터 안팍으로 데이터를 축약해서 그리는 센스가 필요합니다.

Google Chart는 Line, Bar, Pie chart와 Venn diagram, Scatter plot을 chat 종류로 제공 하며 각 종류 별로 넣을 수 있는 옵션이 따로 제공 됩니다. 마찬가지로 모든 옵션은 URL 안에 파라메터로 넣을 수 있습니다.

각 차트는 색과 라벨 스타일을 줄 수 있으며 차트 타입과 색깔, 라벨, 스타일에 따라 다음과 같이 여러가지 모양의 차트를 그릴 수 있습니다.

상세한 옵션은 너무 많으므로 직접 가서 보시면 되겠습니다~ ..상세옵션 보기

  Line chart with unevenly spaced data points and lines in red, green and dashed blue
Horizontal bar chart with two data sets: one data set is colored in red the second is stacked in greenVertical bar chart with two data sets: one data set is colored in red the second is adjacent in green

Two-dimensional pie chart with six segments where segment colors are interpolated from dark to pale orangeThree-dimensional pie chart with six segments where segment colors are interpolated from dark to pale orange
Venn diagram with three overlapping circlesScatter plot with default blue circle data points in different sizes as defined by a third data set

Line chart with one red, one blue, and one green lineHorizontal bar chart with one data set in red, the second stacked in green, and the third in blue
Red line chart with pale gray background and chart area in a white to blue vertical linear gradient from bottom to top Blue line chart with alternating gray and white stripes from left to right
Venn diagram with two smaller circles enclosed by a larger circleLine chart with min, average, and max on the left, 0, 1, 2, 3, and 4 on the right, 0 to 100 along the x-axis and Jan, Feb, and March in blue below
Line chart with one solid line and one dashed lineLine chart with 20 pixel red cross, 20 pixel green diamond, 9 pixel purple arrow, 20 pixel orange circle, 10 pixel blue square, 1 pixel pale gray vertical line, 1 pixel blue line and a 20 pixel yellow cross all drawn on the data points of a single line. A thin black horizontal line intersects the vertical line v at point 7
Scatter plot with 10 pixel red square markersThree lines on a chart; chart is shaded in green from bottom to first line, red from first to second line, dark blue from second to third line and pale blue from third line to top of the chart
신고
Posted by 양고기

댓글을 달아 주세요

Inspiration2007.11.29 16:33
사용자 삽입 이미지

구글의 새로운 서비스인 My Location은 모바일 구글맵을 이용한 서비스로, 사용자의 Mobile 기기에 GPS가 없더라도 현재 위치를 구글맵에 표시 할 수 있는 서비스 입니다.

이 서비스는 문자나, 전화, 인터넷 등을 쓸 때 거치는 중계기의 위치를 이용해 모바일 기기의 위치를 추측하는 서비스 인것 같습니다.

자세한 사항은 아래 동영상을 보세요.


신고
Posted by 양고기

댓글을 달아 주세요

Inspiration2007.11.08 11:53
사용자 삽입 이미지

Adobe Max 가 미국 시카고에서 열렸는대요.

여기서 Flash10 에 대한 엄청난 소식들이 들려왔습니다.

그중에 단연코 오마이갓을 외치게 하는 소식은 Flash on C/C++ 입니다.

즉 C나 C++ 소스를 Actionscript로 자동 컨버팅 하여 flash에서 돌아가게 한다는 것인대요.

여기까지를 보면 왠지 복잡한 어플리케이션은 자동 컨버팅이 힘들꺼 같기도 합니다.

그러나 아래 동영상을 보십시오. 4:50초 정도쯤에 나오는 영상을 보면, Flash10에서 Quake2를 컨버팅 해서 돌립니다.

오마이갓 -_-;; 멋지군요 정말;;


신고
Posted by 양고기

댓글을 달아 주세요

  1. in0de

    와... 이건 10분 기립박수 칠만하겠는데요

    2007.11.08 18:56 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 그렇죠 퀘이크2가 작동하자마자 나오는 관중석 반응이 엄청나게 뜨겁죠~

      2007.11.08 21:57 신고 [ ADDR : EDIT/ DEL ]
  2. 진짜 대박이군요. 정말 개발자들 미친 짓 한거 같은데.

    2007.12.07 20:01 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. pelix

    퍼 갑니다 ^^

    2008.08.26 11:42 신고 [ ADDR : EDIT/ DEL : REPLY ]

Inspiration2007.10.15 17:02
Adobe Air는 HTML, AJAX, FLASH, FLEX 를 만들줄 아는 사람을 상대로 비교적 간단하게 Desktop에서 돌아가는 RIA(Rich Internet Application) 을 만들 수 있게 해주는 프로그램 입니다.

여기선 FlexBuilder 3와 Flex를 이용해서 HelloWorld 프로그램을 Air로 만들어 보겠습니다.

Adobe Air는 무료로 배포하는 SDK가 존재 합니다. 그러나 이걸로 Air를 만들려면 SWF를 만들 수 있는 다른 flex sdk 혹은 flash 혹은 flexbuilder가 필요 합니다. 또한 이래저래 설정에도 손이 많이 갑니다. 그래서 그냥 한방에 모두 해결되는 flexbuilder3를 씁니다. flex sdk + air sdk로 쓰시려는 분들은 이런 글이 없이도 문제를 해결 하실 실력이 되리라 믿습니다.

FlexBuilder3는 현재 Adobe Air beta2가 발표된 시점에서 다운받을 수 있는 가장 최신 버전인 Beta2 (M3)를 다운 받습니다.

http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_adobeflexbuilder3

위 URL에서 다운 받을 수 있지만 Adobe Lab의 계정이 필요 합니다. 그냥 별 조건 없이 가입 하시면 다운 가능 합니다.

다운 받으신 Flex Builder3를 설치 합니다. 그냥 next만 누르셔도 설치 됩니다. 뻔한 부분이라 더 뭐라 설명하기 힘드군요~

혹시 구버전의 FlexBuilder MOXIE를 설치 하셨었던 분은 언인스톨 하시고 설치 하십시오. 제 경우 제대로 인스톨이 되지 않더군요.
설치를 끝나고 Flex Builder3를 실행 시키시면 첫화면이 뜹니다. Eclipse가 base인 프로그램이라 Eclipse를 쓰시던 분들은 친숙한 UI가 보이실 것입니다.

여기까지가 인스톨 방법 이였고 누구나 프로그래밍을 한다면 다 짜봤다는 HelloWorld 를 만들어 보겠습니다. 그러나 코딩한줄 안하고 마우스로만 만들어 보겠습니다.

File - New - Flex Project를 선택 합니다. 그럼 다음과 같은 창이 나타납니다.
사용자 삽입 이미지
Project의 이름을 적은 후 Application Type을 Desktop Application으로 선택 합니다.
그다음 바로 Finish를 누릅니다. 그럼 다음과 같이 프로젝트가 생깁니다.
사용자 삽입 이미지

이제 Flex Builder3의 가운대 부분을 보면 뭔가 마우스로 컨트롤 할 수 있는 에디터가 떠 있는 것을 볼 수 있습니다. 여기에 HelloWorld 를 만들어 보겠습니다. 최종적으론 다음과 같이 편집 할 것입니다.
사용자 삽입 이미지

가운대 에디터 화면에는 Source와 Design의 탭이 있습니다. 이 탭들은 각각 MXML이라는 XML 파일의 형태로 소스를 작성하는 Text Editor 부분과 UI를 마우스 조작으로 만들 수 있는 Design Editor로 각각 소스를 보여 줍니다. 각 에디터에서 조작한 부분은 다른쪽에서 반영되어 바로 볼 수 있습니다.
이번에는 Design Editor만 써 보겠습니다.

최초로 나온 빈 박스를 누르면 사방의 크기를 조절 할 수 있습니다. 이 사각형을 잡아 원하는 크기로 줄일 수 있습니다.

또한 왼쪽 아랫부분에 다음과 같이 생긴 control 들을 골라 원하는 위치에 넣을 수 있습니다.
사용자 삽입 이미지

이번엔 Hello World라는 글자를 써야 하므로 Label Control을 쓰겠습니다.
Label Control을 마우스로 끌어와 가운대 Box에 넣은 후 Label에 Hello world라 적습니다.

그다음 Label의 속성을 변경해 보겠습니다. Label을 마우스로 선택 한 후 오른쪽 하단을 보면 다음과 같은 속성창들이 보입니다.

사용자 삽입 이미지
이 속성 창에서 Style 부분의 폰트 속성을 바꾸고 정렬 방법을 바꿉니다. 물론 Border/Alpha 등의 속성 또한 바꿀 수 있습니다. 하나씩 바꿔보면 모두 바로바로 적용되어 보이므로 한번씩 바꿔 보는 것도 좋습니다.

여기 까지 한 후 바로 화면 왼쪽 상단의 Run 버튼을 누르면
사용자 삽입 이미지

프로그램이 작동 하는 것을 볼 수 있습니다.
사용자 삽입 이미지

그다음 이 HelloWorld 프로그램에 약간의 양념을 쳐보겠습니다.

왼쪽의 Flex Navigator에서 HelloWorld 프로젝트의 파일들을 보면 HelloWorld-app.xml 이라는 xml 파일이 보일 것입니다.

이 파일은 Adobe Air 프로그램을 작성할때 생기는 설정 파일로, Air 프로그램의 Install과 Icon, root Window의 설정 등을 선택 할 수 있습니다. 이 파일을 열어 root Window에 변화를 주겠습니다.

HelloWorld-app.xml 파일을 열어 안을 보면, 다음과 같은 항목들이 보입니다.

<systemChrome>standard</systemChrome>
<transparent>false</transparent>
이 항목들을 다음과 같이 고칩니다.

<systemChrome>none</systemChrome>
<transparent>true</transparent>


각 항목들에 대한 자세한 설명은 그 항목의 윗부분에 주석으로 달려 있습니다. 좀 더 자세히 알고 싶은 분들은 주석을 보시면 많은 것을 알 수 있습니다.

이렇게 고친 후 저장 하고 다시 프로그램을 Run 시켜 봅니다.
그럼 윈도우 화면이 약간 달라져 있는 것을 알 수 있습니다.
사용자 삽입 이미지


이제 윈도우에 반투명 효과를 주겠습니다. Design Editor 화면에서 Control들을 집어 넣은 Box를 선택 합니다. 그 후 오른쪽 하단을 보면 다음과 같은 Properties Window가 보입니다.

사용자 삽입 이미지
이 윈도우에서 Border/Alpha 항목의 하단 오른쪽에 있는 Alpha값을 조절 합니다.
물론 다른 속성들을 변경해 보아도 됩니다.

Fill항목에서 Red 100%와 White 100%로 Gradient Color를 만든 후 Border/Alpha에서 Alpha에 60%를 변경시킨 후 Run 시키면 다음과 같은 결과가 나옵니다.
(Border/Alpha의 alpha와 Fill의 alpha를 혼동하면 안됩니다. Border/Alpha의 alpha는 윈도우 자체의 투명 효과를 조절 하며 Fill은 단지 색깔에 대한 투명 효과만을 조절 합니다.)

사용자 삽입 이미지

이제 이 프로그램을 Installer를 붙여 Air Application으로 만들어 보겠습니다.

Project - Export Release Version 을 선택 합니다. 그러면 다음과 같은 윈도우가 나옵니다.
사용자 삽입 이미지

여기서 Export to file에 Export 된 프로그램이 놓이길 원하는 곳을 설정 합니다. (기본 값은 프로젝트 폴더 안에 생깁니다.) 그다음 Next를 누르면 다음과 같은 창이 나옵니다.
사용자 삽입 이미지

이곳에서 Air 파일의 인증을 해야만 프로그램을 만들 수 있습니다.
인증파일은 임시로 Create에서 만들 수 있습니다.
Create 버튼을 누른 후 다음과 같은 창이 나옵니다.
사용자 삽입 이미지
Publisher name과 Country등을 선택한 후 패스워드를 입력하고 저장할 공간을 선택해 저장 합니다.

그다음 만들어진 Certificate file과 입력했던 패스워드로 방금 나온 창에 입력하여 finish를 눌러 파일을 생성 합니다.

그러면 원하는 곳에 HelloWorld.air와 같은 형태의 air 파일이 만들어 집니다.
이 파일을 실행 시키면 다음과 같은 인스톨 윈도우가 나타납니다.
사용자 삽입 이미지

이 윈도우의 하단에 보면 임시로 만든 Certificate file로 만들어진 것이기 때문에 보안 경고가 나타나지만 Install을 선택해 설치할수 있습니다.

설치하게 되면 같은 HelloWorld.air를 다시 작동 시키거나, 설치중에 선택할 수 있는 바탕화면혹은 시작메뉴에 에 바로가기 만들기로 만들어진 바로가기를 선택하여 프로그램을 작동 시킬 수 있습니다.
또한 HelloWorld.air를 설치 한 후 다시 작동 시키면 Uninstall 메뉴가 나와 프로그램을 제거 할 수 있습니다.

여기까지 HelloWorld를 만들어 보았습니다.
다음번엔 자주 쓰이는 Control들의 쓰임세를 알아보겠습니다.
신고
Posted by 양고기

댓글을 달아 주세요

분류없음2007.03.31 23:08
오픈마루 에서 만드는 스프링노트가 드디어 가입 할 수 있게 오픈 했습니다.
새싹 오픈이라고 하는대 사용자의 가입을 일단 받은 후 점점 의견을 받아 업그레이드 시키는 서비스 인것 같습니다.

스프링노트가 뭔지 잘 모르시는 분들을 위해 간략히 설명 하자면, 일종의 개인용 위키 서비스 라고 할 수 있습니다.

보통 인터넷에 뭔가 노트처럼 적어 놓으시려고 하시는 분들이 쓰면 참 좋으실것 같습니다.

사용자 삽입 이미지

스프링노트


평소에 아이디어 적을곳이 없어서 개인용 위키를 하나 운영하던 저로서는 참으로 괜찮은 서비스를 만난것 같습니다.

좀더 써봐야 알겠지만 괜찮은 서비스를 하나 찾은거 같아 기분이 좋습니다~
신고
Posted by 양고기
TAG web2.0

댓글을 달아 주세요

  1. 사라가 짝사랑한 그.. 카알~

    2011.11.11 21:00 신고 [ ADDR : EDIT/ DEL : REPLY ]

Inspiration2007.03.29 04:48
라디오 사이트는 사용자가 클릭한 부분의  위치에 따라 다른 느낌의 음악을 틀어 줍니다.
리모콘에서 선택한 음악 방송들은 플래쉬를 통해 사용자 에게 스트리밍 되며 각 방송의 장르는 최초 클릭한 부분의 성향 혹은 장르에 따라 선택 되며, 비슷한 장르의 여러 방송이 화면 상에 선택 할 수 있게 이쁘게 뿌려 집니다.

http://www.musicovery.com/index.php?ct=us

Musicovery Interactive Radio


신고
Posted by 양고기

댓글을 달아 주세요

  1. 음량 조절이 없어서 (제가 못찾은 건지) 아쉽긴 하지만, 인터넷 라디오의 색다른 방향을 제시해주는 서비스 같네요. 좋은 정보 감사합니다. :)

    2007.03.29 05:16 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 공유합니다.

    한국에도 생겼습니다..www.necube.com 특허등록도 되어 있네요. 느낌검색이라고 하지만 뮤직커버리처럼 음악듣기는 좋은 것 같습니다. 무엇보다도 다른 사람들의 느낌도 검색할 수 있네요.

    2010.01.22 11:33 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 사라가 짝사랑한 그.. 카알~

    2011.11.11 21:00 신고 [ ADDR : EDIT/ DEL : REPLY ]


티스토리 툴바