보통 웹 개발 시 피그마를 활용하여 이미지를 잘라 사용하여 최적화 후 웹사이트에 적용할 것이다. 하지만, 미세하게 파고들어 갔더니 아래와 같은 예상치 못한 결과가 나왔다. 아래 원본 이미지를 기준으로 진행한다. 최적화 도구는 FastStone Photo Resizer, TinyPNG 활용했다. 새로운 사실 1. 아래 원본을 피그마 동일한 크기로 업로드 후 추출만 했을 뿐인데 화질 차이가 심하게 나고 있다. 우측을 보면, 전체적으로 흐리멍덩하고 뿌연 화질이다. 특히, 피그마에서 추출 시 아래 붉은색 표기된 부분과 전체적으로 블록형태의 깨짐이 발생했다. 피그마에서 이미지 랜더링 과정에서 화질을 갉아먹는 행위를 하고 있다. 새로운 사실 2. 원본을 피그마 업로드 후 순정 상태로 추출만 했을 때 용량이 3.53..

콘텐츠가 많고 일반적으로 px이나 rem 등으로 고정해야 되는 레이아웃은 논외이다. 이 레이아웃들은 모든 간격이 고정되어 있고 해상도를 줄였을 때 자연스럽게 글자나 콘텐츠들이 아래로 내려오게 grid, flex 등을 활용하면 그만이다. 이미지와 적은 글자들이 어우러져 있는 레이아웃은.... 특히, 4k 해상도까지 고려해야 된다면, 아래 방법 밖에 답이 없는 것 같다. 오늘 내내 고민을 해봐도, 하나의 세션 안에 width와 padding-bottom을 설정하여 영역을 설정한 후 자식 요소들은 position absolute를 기본으로 사용하여 위치를 잡고 그 외 간격들은 %로 처리하며 글자 크기는 vw로 설정한다. line-height는 1.6 등과 같이 단위 없는 비율로 설정하고 em을 활용하여 폰트 ..