wish me luck

과거에는 PC로만 인터넷에 접속했기 때문에 웹 사이트 디자인을 할 때 PC의 모니터를 기준으로 했다면 요즘은 PC, 테블릿, 스마트폰 등 다양한 기기들의 출현으로 글씨가 작게 보이는 등의 문제가 발생했다. 그런 이유로 PC버전과 모바일버전의 웹사이트를 따로 제작하게 되면 비용, 시간, 인력이 모두 2배로 들기 때문에 비효율적이다. 그리고 드디어 반응형 웹이라는 기술이 등장했다.

반응형 웹이라는 것은 다양한 기기, 환경마다 최적화된 웹사이트를 제공하는 것을 말한다.

반응형 웹의 장점

1. 유지보수가 간편하다.

- 모바일 버전과 데스크톱 버전을 따로 만들 경우 새로운 내용을 추가하거나 수정할 때 개별적으로 수정하는 반면 반응형 웹에선 한번에 할 수 있다.

2. 모바일 점유율의 증가.

- 모바일로 인터넷에 접속하는 사람들을 위한 모바일화면에 최적화된 화면을 구성할 수 있다.

3. 마케팅에 유리하다.

- 각 기기들에 최적화된 화면을 제공함으로써 웹 사이트에서 보여주고자 하는 내용을 잘 전달할 수 있다.

4. 검색 엔진 최적화가 가능하다.

- 검색 엔진 최적화(SEO, Search Engine Optimize)란, 포털 사이트나 검색 사이트에서 사용자가 특정 키워드로 검색했을 때 검색 결과에서 상위권에 나타나도록 관리하는 작업을 말하는데 데스크톱 전용 웹사이트와 모바일 전용 웹사이트 등으로 사이트가 나눠지면 주소 또한 나눠지게 되고 이런 경우, 검색엔진이 검색 결과를 나타냄에 있어서 불리함을 가진다. 반면에 반응형 웹을 이용하여 웹 사이트를 만들면 하나의 주소만을 사용하게 되어 검색 결과 노출에 유리함을 가지게 된다.

5. 미래 지향적 기술이다.

- 미래에는 테블릿, 스마트폰뿐만 아니라 TV, 냉장고, 내비게이션 등 더 다양한 기기들로 웹 사이트를 접속할 수 있게 될 것이다. 그렇기 때문에 다양한 화면에 최적화가 가능한 반응형 웹 기술이 필수적이다.

반응형 웹의 단점

1. 기획력과 디자인의 어려움

- 기기, 환경마다 최적화된 구조를 설계해야 하기 때문에 제작함에 있어서 조금 더 어렵다.

2. 높은 비용

- PC만 지원하는 웹 사이트 제작보다 더 많은 비용이 발생하며 유지 보수 비용 또한 높다.

반응형 웹을 만들기 위해서는 미디어 쿼리가 필요하다. 

미디어 쿼리는 CSS3부터 지원되는 기술로 미디어 타입, 화면 크기 등을 기준으로 다른 스타일 시트를 적용시켜 주며 이를 이용하여 화면 크기가 달라질 때 스타일을 바꿀 수 있고 반응형 웹을 만들 수 있다.

BMP, JPG 등 이미지 이름 끝에 붙는 확장자들을 보면서도 우린 무슨 차이가 있는지 알지 못합니다. 그래서 그 차이를 설명하려고 합니다.

1. BMP ( Microsoft Windows Device IIndependent Bitmap )

: DOS와 윈도우 호환 컴퓨터에서 사용되는 Bitmap 이미지이다. 압축을 지원하지 않아 지나치게 높은 파일 용량이 문제가 되어 웹용 이미지에 적합하지 않다는 단점이 있다. 최근 BMP 파일도 압축을 지원하기 시작했다.

2. PNG ( Portable Network Graphics )

: 배경이 투명한 파일을 만들거나 저장할 때 많이 쓰이며 색상을 최대한 그대로 유지할 수 있기 때문에 최근에 많이 쓰이고 있다. 단점이 있다면 색상을 그대로 유지시키는 만큼 파일 용량이 크다.

3. GIF ( Graphic Interchannge Form )

: JPG나 PNG 파일 형식과 비교했을 때 파일 크기가 작다는 장점이 있으며, 투명한 배경과 움직이는 이미지를 만들 수 있다는 장점이 있다. 단점으로는 표현할 수 있는 색상 수는 최대 256가지 뿐이다. 그래서 웹 페이지에서는 아이콘이나 불릿 등 작은 이미지에 주로 사용하고 있다.

4. JPG, JPEG( Joint Photographic Experts Group )

: 사진을 웹 페이지에 넣기 위해 개발된 형식이다. 컴퓨터에서 저장할 때나 디지털 카메라에서 저장할 때 많이 쓰이는 확장자이다. JPG와 JPEG 차이는 없으며 정식 명칭은 JPEG 이지만 윈도우와 도스에서는 확장자가 3자리로 표시되어 JPG로 쓰인 것이다.

5. PSD ( Periscope Debugger Definition )

: 포토샵에서 저장할 때 쓰는 확장자이다. 포토샵에서 작업을 했을 때 사용한 레이어들을 하나하나 다시 사용할 수 있기 때문에 계속된 작업이나 수정을 할 때 중요하다. 다른사람이 사진을 수정할 수 있게 하고 싶다면 사진과 함께 PSD 파일을 주면 좋다.

6. TIFF ( Tagged Image File Format )

: TIFF는 무손실 압축방식의 파일이다. 최대한 원본 그대로 보존해야하는 중요한 이미지에 쓰는 확장자이며 데이터 손실이 최소화 된다. 단점으로는 용량이 매우 높기 때문에 많이 사용하진 않는다.

7. SVG (Scalable Vector Graphics )

: 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일형식이다. 이미지 또는 이미지에 채도, 투명도 등을 더하면  XML 텍스트 파일로 정의되어 검색화, 목록화, 스크립트화가 가능하며 압축 역시 가능하다.

AI, PXR 등 여러가지 이미지와 관련된 확장자들이 있습니다. 

그렇지만 '이 확장자가 제일 좋다' 라는 것은 없습니다. 물론 자주 쓰이는 확장자들은 있습니다. PNG, GIF, JPG, PSD 가 대표적으로 많이 쓰이는 확장자들이죠. 그 외의 것들이 나쁘다라는게 절대 아닙니다. 사용자의 용도에 맞게 사용하는 것이 가장 중요하며 그러기 위해 많은 확장자들이 존재하는 것이 아닌가라는 생각이 듭니다.