디자인 레이아웃을 위한 이미지 규격 사이트 place-hold.it - HTML/CSS

이미지 규격 사이트

코드에디터 하나를 덩그라니 열고

프론트엔드 디자인을 하다보면  

모든 것을 다 할 수 있을 것 같은데

생각보다 한계가 있습니다.

 

웹UI를 만들기 위해서는 실제 레이아웃을

봐가면서 미세한 조정을 해야 할 필요가

있는데 그럴려면 이미지의 URL을

실제로 링크를 걸어서 보는게 좋습니다.

 

대충 느낌을 보는 것 만으로도

웹디자인이 수월해질텐데

아쉽게도 브라우저에서 자체로

지원하는 그런 기능은 별로 없습니다.

 

이런 부분은 웹의 오랜 역사를 생각하면

아이러니 한 부분인데요.

수많은 웹 디자이너들이 같은 문제를

생각했다는 것을 감안하면 왜 브라우저는

그런 기초적인 부분 조차 지원하지 않는건가?

구체적으로는 HTML이 버전업을 하면서도

가장 기초적인 개발 지원에서는 뭔가

디테일하지 않은가? 에 대한 의문을 가질 수 있습니다.

 

예를 들어 이미지 더미(place holder라고 하는)를

생성할 수 있는 기능을 브라우저 차원에

넣는 정도는 그렇게 어렵지 않은 기술입니다.

그냥 태그나 css에 추가하면 될 일입니다.

하지만 W3C(웹 표준 개발기구)는 하지 않는데요.

우리가 생각하는 것보다 월드 와이드 웹은

세계에서 가장 보수적인 집단일 수 있다는

생각이 지나치지 않은 것 같습니다.

 

 

IT기술에 있어서 보수적이란 것은

기술 자체에 대해 순수하다 - 라는

아이디어와도 관련이 있는데요.

뭐가 당장 필요하다고 해서 잘 바꾸는 성향이

아니라면 그게 보수적인 것 입니다.

 

팩트적으로 인터넷은 21세기의 가장

진보 성향의 기술이기 때문에

뭔가 새로운게 나오면 기존의 것을 버리고

새로운 것을 받아들여야 할 것 같은데

의외로 W3C는 그렇지 않습니다.

 

여기서 W3C를 어줍짢게 비판하려는 것은 아니고

단지 최첨단 웹브라우저에 이렇게 간단한

개발자 기능 조차도 없다는 점에 한번

의문적인 호기심을 제기해보는 겁니다.

 

결론은 인터넷의 규격을 제정하는 기관은

보수적인 집단이다. 그리고 그들이

왜 보수적인지는 쉽게 이해할 수 있습니다.

 

오늘날 인터넷, 즉 웹브라우저가 서버와

통신하는 이 기술의 사용자는 엄청납니다.

전 세계 인구가 77억? 한 80억 정도 가까이

되는데 이 사람들이 모두 잠재적인 인터넷

사용자라고 봐도 무방합니다.

 

지금은 모든 사람들이 원하건 원하지 않건

인터넷을 거치고 살아가게 되있습니다.

못사는 나라건 잘사는 나라건 언젠가는

인터넷에 박재가 됩니다. 그게 인터넷의 특성입니다.

어떤 나라가 인터넷을 사용하지 않아도

인터넷을 사용하는 다른 나라에서 호기심에

(위키피디아를 작성하기 위해)그 나라의 정보를

인터넷에 옮겨놓습니다. 사실은 80억 세계 인구가

모두 인터넷을 사용하는가는 중요하지 않은거지요.

모두가 그 안에 있는 것과 마찬가지 입니다.

 

 관리해야 할 집단과 사람들이 많아지면

그 시스템은 필연적으로 보수화가 진행되는데

인터넷 기구인 W3C가 보수화 되는 것은

당연한 수순이었을 겁니다. 특히 천조국

미국에서 발생한 기술이다 보니 더욱

보수적이 될 수 밖에 없습니다.

 

미국을 경험해본 사람들은 잘 알지만

미국은 지극히 보수적인 사회입니다.

온갖 인종이 믹스해서 사는 것 처럼 보이지만

그건 바깥에서 봤을 때 입니다.

미국은 태어나는 순간 거의 모든 것(신분)이

결정되는 사회입니다. 미국 사람들은

ethnicity 에 대한 개념이 있고

그에 따라 행동합니다. 한국 사람이라면

함부로 말하기도 부담스러운 내용이겠지요.

그 많은 인종들을 통합해야 하기 때문에

미국은 기본적으로 보수 사회에 가깝습니다.

우리가 보는 문화적이 부분들, 서브 컬쳐는

어디까지나 엔터테인먼트 + 상업성이 강하지요.

(보수나 진보 사회나 돈이 되는 건 누구나 바라니까)

 

이 IT짭블로그에서 세계 정치 같은 것을

논하는 것이 좋은 것은 아니지만 요즘

세계 정세에서 벌어지는 일들을 보면

조금은 정치적으로 변하는게 사실입니다.

 

러시아와 우크라이나의 전쟁은 IT업계 쪽에서도

상당히 충격적이고 미래를 알 수 없는

그런 혼돈의 시대로 받아들이고 있습니다.

 

미국이 IT를 주도하지만 러시아의 영향력도

상당합니다. 구글의 세르게이 브린은

소련 연방 출신이고 이더리움의 비탈릭 뷰테린은

러시아 국적입니다. 이 두사람은 거의 20대의

어린 나이에 이 모든 알고리즘과 시스템을

고안했다는 것 입니다. IT기술에서 러시아의

영향력은 상당히 큽니다.

 

앞으로의 인터넷이 미국과 서방세계가 제시한

웹 3.0인줄 알았는데 그게 아닐 수도 있습니다.

지금 러시아나 미국이 서로 인터넷 끓으려

하는데 어떤 일이 생길지 모릅니다.

갑자기 러시아가 C언어 말고 html말고

다른 언어 사용할지도 모릅니다.

지금의 세계정세를 보면 어떤일이 일어날지

한치 앞을 알 수 없기 때문에

일단은 지켜볼 필요가 있습니다.

place-hold.it

*포스팅이 삼천포로 빠져드는데

place-hold.it 사이트를 소개하겠습니다.

 

Place-Hold.it | Placeholder Images For All!

 

알만한 사람은 다 아는 사이트고

모르는 사람에겐 꿀팁입니다.

 

웹페이지에서 img 태그나 이미지를 로드할 때

URL이 필요합니다. 그런데 번거로우니까

이 웹사이트를 사용하면 됩니다.

 

예를 들어 아래와 같이 입력하면...

 

 

 

다음의 URL로 이미지 파일을 생성합니다.

 

https://place-hold.it/300x200/000000/FFFFFF.jpg&fontsize=15

 

 

 

사실은 이런 형식으로 많이 사용합니다.

width x height 로 디자인 레이아웃을 하지요?

디자이너들은 이런 더미만 가지고도

머리속에서 느낌이 나오기 때문에 충분합니다.

 

https://place-hold.it/300x200

300은 너비이고 200은 높이입니다.

URL을 더미 이미지 사이즈를 만드는데

사용할 수 있기 때문에 도움이 됩니다.

 

https://place-hold.it/ 웹사이트를

방문할 필요도 없으니까 혜자입니다.

 

그냥 에디터를 열고

https://place-hold.it/너비x높이

이렇게 사용하면 됩니다.

 

인터넷에는 직접 이미지 샘플을

사용할 수 있는 사이트도 있습니다만,

그건 개별 이미지의 느낌을 주기 때문에

(스톡 이미지라서 사이트 적합도 판단이 어려움)

좀 새로운 작업을 할 때 맞지 않는 것

같기도 합니다. 차라리 이렇게 심플한

방식이 일반적으로 적당하지 않나 싶습니다.

 

placeholder안에 무슨 이미지가 들어가건

디자이너나 마케팅 담당자의

상상에 따라 달라지는 겁니다.

단지 placeholder는 느낌을 주는 거지요.

 

별거 아닌 팁이긴 하지만,

프로 디자이너들은 이러한 별거 아닌 팁들을

수백개에서 수천개까지 가지고 일을 합니다.

 

프론트엔드 분야에서는 이런 짤짤한 팁들을

최대한 많이 습득하면 도움이 됩니다.

 

프론트엔드 웹이 어떻게 변화할지

아직도 가늠이 잘 안되는 시대이지만,

이렇게 가장 기본적인 이미지 요소같은 것은

미래에도 여전히 필요할 것으로 봅니다.

 

*place-hold-it의 이미지를 가지고

반응형 웹사이트를 만들어 보는 것도 좋습니다.