삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #적용완료

블로그에 360 사진을 올려보자

---

관련내용

2017/05/08 - [VR] - 삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #준비작업

2017/05/15 - [VR] - 삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #준비작업2

2017/05/15 - [VR] - 삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #적용완료

<div id="panorama" style="width:80%;height:400px;margin: 0 auto;"></div>
<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "http://i.imgur.com/xzZizo4.jpg",
     "autoLoad": true,
     "autoRotate": -10
});
</script>

위 코드는 지금까지 360 사진을 보여줄때 사용한 코드입니다. 그런데 조금의 문제(?)가 있습니다.

중간에 "panorama": "http://i.imgur.com/xzZizo4.jpg" 코드가 문제를 보이고 있습니다. 사진을 imgur 이곳에 올려서 사용을 한것입니다.

처음엔 모든것을 티스토리에서 끝내자! 이것이 목표였습니다. 사진도 티스토리에 올리고 360 사진 구동도 티스토리 자체에서 돌아가도록 하는것이 목표였습니다. 그런데 사진을 imgur 을 통해서 보여주고 있게 되었습니다. 이유를 알아보도록 하겠습니다.

이미지 호스팅

결론은 이미지 호스팅이 문제였습니다. 

우선 위와 같은 360 사진을 티스토리에 올리고 그림에서 오른쪽 마우스클릭후 이미지 주소복사 하면

"https://t1.daumcdn.net/cfile/tistory/26267235591922213B" 의 이미지 주소가 나옵니다.

이걸 그대로 사진 주소에 아래 코드와 같이 넣으면

<div id="panorama" style="width:80%;height:400px;margin: 0 auto;"></div>
<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "https://t1.daumcdn.net/cfile/tistory/26267235591922213B",
     "autoLoad": true,
     "autoRotate": -10
});
</script>

Pannellum 2.3.2

Loading...

The file https://t1.daumcdn.net/cfile/tistory/26267235591922213B could not be accessed.

Click to
Load
Panorama

△ 위와 같이 접속할수 없는 사진이라고 나온다.

티스토리에서 절대주소로 사진을 접속하는것을(외부링크허용 하는것)  막고 있다고 한다. 티스토리에 사진만 올리고 그걸 외부에서 가져다 사용하는것 때문에 막은듯 하다. 그래서 방법을 또 찾아보았다. 자체적으로 해결하고 싶다는 의지와 함께!

티스토리에 올린 사진을 외부에서 썸네일 형식으로 가져가는 주소가 있었다.

"http://t1.daumcdn.net/thumb/R1024x0/?fname=실제 이미지 주소" 이렇게 하면 이미지를 보여줄수 있다고 했다. 그런데 적용해 보았지만 아직도 사진이 안나오는 것이었다. 어찌하다 사진을 파일첨부 형식으로 올리고 위의 형식을 다시 적용해 보았다.

△ 포토업로더가 아닌 파일첨부 방식으로 사진을 한번 올려보고 적용해 보았다.

파일 형식으로 올린 360 사진의 경로는 "https://t1.daumcdn.net/cfile/tistory/21430E4D5919316F24" 이고 위의 썸네일 경로는

"http://t1.daumcdn.net/thumb/R1024x0/?fname=https://t1.daumcdn.net/cfile/tistory/21430E4D5919316F24" 이다.

아래의 코드와 같이 적용했다.

<div id="panorama" style="width:80%;height:400px;margin: 0 auto;"></div>
<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "http://t1.daumcdn.net/thumb/R1024x0/?fname=https://t1.daumcdn.net/cfile/tistory/21430E4D5919316F24",
     "autoLoad": true,
     "autoRotate": -10
});
</script>

Pannellum 2.3.2

Loading...

The file http://t1.daumcdn.net/thumb/R1024x0/?fname=https://t1.daumcdn.net/cfile/tistory/21430E4D5919316F24 could not be accessed.

Click to
Load
Panorama

△ 위와 같이 나오긴 나온다.!

드디어! 나온다! 티스토리에서 모든걸 해결할수 있게 되었다. 그러나 화질이 너무 별로다. 썸네일용이라서 해상도가 너무 낮아진 탓이었다. 그리하여 어쩔수 없이 이미지 호스팅을 무료로 해주는 imgur 을 통해서 올릴수 밖에 없었다...아쉽구나 아쉽다.

Pannellum 2.3.2

Loading...

The file http://i.imgur.com/sfAumQQ.jpg could not be accessed.

Click to
Load
Panorama

△ 위와 같이 깨끗하게 티스토리에서 올리고 싶다!!

티스토리에서 자체적으로 360 사진을 볼수 있도록 지원해달라!!

결국 모든걸 자체적으로 해결할수 없었다(고해상도기준으로)

아쉽지만 이건 티스토리에서 360 사진을 볼수 있게 지원을 해줘야 할듯 하다. 편리하게 360 사진을 올릴수 있도록 티스토리는 지원하라!!

관련내용

2017/05/08 - [VR] - 삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #준비작업

2017/05/15 - [VR] - 삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #준비작업2

2017/05/15 - [VR] - 삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #적용완료

---