오늘도 개발자가 안 된다고 말했다(2)

이 글은 ‘오늘도 개발자가 안 된다고 말했다’ 책을 읽고 내용과 느낀 점을 정리한 것입니다.

👉 상황에 맞는 이미지 형식

이미지 포맷은 비트맵과 벡터 방식으로 나뉜다.

• 비트맵 이미지는 작은 픽세들이 모여 하나의 이미지를 만드는 형태. 확대하면 깨져보이는 특징.
• 벡터 이미지는 점과 선으로 이루어진 이미지. 확대해도 깨지지 않는 특징.

대표적으로 JPEG, PNG, GIF, SVG 이미지 포맷이 있다. 알아보자.

1) JPG(JPEG)

손실 압축 포맷으로 압축할 경우 이미지의 품질이 떨어지지만, 용량을 많이 줄일 수 있다. 그림, 사진 등 웹에서 주로 사용하며 비트맵 방식이다.

2) GIF

PNG 가 나타나기 전에 개발된 무손실 압축 포맷이다. 애니메이션을 지원한다. 색상을 256가지만 지원하기 때문에 다른 포맷보다 지원 색상이 적어 GIF 로 변환하는 과정에서 품질이 떨어져 보일 수 있다. 비트맵 방식이다.

3) PNG

대표적인 무손실 압축 포맷으로 이미지 품질의 손실이 없고, 투명도 표현이 가능하다. JPG 보다 용량이 크다. 투명도가 필요한 이미지에 주로 사용되며 비트맵 방식이다.

4) SVG

SVG 는 벡터 방식으로 이미지를 확대, 축소해도 깨지지 않는다. 또한, XML 로 작성이 되어 코드로 생삭을 수정하거나 여러 애니메이션 동작을 만들어낼 수 있는 장점이 있다.

👉 폰트

1) 시스템 폰트

시스템 폰트는 사용자의 컴퓨터에 설치된 폰트를 말한다. 시스템 기본 폰트는 표현력의 한계가 있다. 그래서 별도의 폰트를 시스템에 설치하여 사용하기도 한다.

2) 이미지 폰트

이미지 폰트는 디자인에 적용한 폰트를 이미지로 잘라서 저장한 것을 말한다. 자주 수정하지 않는 타이틀에 사용하는 것이 좋고, 이미지로 저장하게 되면 용량이 커져서 웹 트래픽 문제가 생길 수 있다. 간단한 텍스트를 수정하는 일도 번거로울 수 있다.

3) 웹 폰트

웹 폰트는 웹에서 보이는 폰트를 말한다. 폰트 파일을 웹 서버에 저장하여 적용하고, 사용자가 웹 페이지 접속 시 폰트를 불러와 주는 방식과 구글에서 제공하는 웹 폰트를 사용하는 방식이 있다.

한글 폰트의 용량은 꽤 크기 때문에 웹 사이트 로딩 속도가 느려지거나 트래픽 문제점이 생길 수 있다.

👉 프로토타이핑

스타트업의 겨우 서비스를 빠르게 만들고 가설을 빠르게 검증하는 방식인 린 스타트업(Lean startup)을 사용하는데 시장에 대한 가정을 테스트하기 위해서 프로토타이핑을 만들도록 권장하고 있다.

프로토타이핑 방식

1. 하이 피델리티 프로토타입(Hi-fi: High Fidelity Prototype) : 실제 서비스만큼 높은 완성도로 프로토타입을 만드는 방식. 완성도가 높기 때문에 시간이 소모되지만 전체 프로젝트의 완성도를 높이기 위해 사용되기도 한다. 프로젝트의 후반 단계에서 사용.
2. 로우 피델리티 프로토타입(Lo-fi: Low Fidelity Prototype) : 가장 최소한의 방법으로 빨리 프로토타입을 만드는 방식. 큰 기술이 필요하기보다 소통을 위한 종이와 펜도 충분하다. 사용자보다 기획자-디자이너-개발자 사이의 프로젝트를 위한 커뮤니케이션 방식이다. 프로젝트의 초반 단계에서 사용.

👉 적응형/반응형 웹

• 적응형 웹 : 사용 중인 기기를 감지하여 최적화된 웹을 보여준다. 사용자가 접속한 기기에 맞는 리소스만 내려받아 사용 속도가 빠르다. 하지만 기기에 따라 별도로 디자인과 개발을 해야 하는 단점이 있다.
• 반응형 웹 : 사용자의 디바이스 크기를 확인하고 UI 가 변경되는 형태. 기기마다 대응하지 않아도 되지만 모든 리소스를 담고 있어 사용 속도가 느리다. 모바일 퍼스트로 제작을 진행하는 경우가 많다.