艾略特(@elliotchen100)의 스레드

"프런트엔드 개발은 절대 사라지지 않을 것이다" - 오리지널 시리즈 픽셀 대 픽셀 챕터 프론트엔드 개발은 절대 사라지지 않을 것입니다. 우리는 그 어느 때보다 픽셀 하나하나까지 신경 쓰는 프론트엔드 엔지니어를 필요로 합니다. 초창기에는 프론트엔드 개발자들이 "이미지 슬라이싱 전문가"들로부터 포토샵 파일을 받았습니다. 이 포토샵 파일의 디자인은 헤더, 내비게이션, 본문, 푸터와 같은 섹션으로 나뉘어 있었습니다. (당시에는 다양한 히어로 섹션이 없었고, 캐러셀과 디자인을 조합하는 것만으로도 엄청나게 멋진 일이었습니다.) 프런트엔드가 영역, 하위 영역 및 레이어가 포함된 분할된 포토샵 파일을 수신하면 필요에 따라 필요한 에셋을 내보내고 표시된 값, 크기 및 배경에 따라 페이지를 구축할 수 있습니다. 프런트엔드는 색상 값을 추출하고, 웹 애플리케이션에 맞게 이미지를 최적화하고, 배경을 제거하는 방법을 배우고, JPG와 PNG의 차이점, 색 영역 및 크기를 이해해야 합니다. 그리드와 플렉스박스가 없던 시절, 크기를 알 수 없는 div를 가운데 정렬하는 것은 프런트엔드 개발자들을 미치게 만들 수 있었습니다. 당시에는 훌륭한 프론트엔드 개발자는 디자인을 페이지에 1:1로 재현할 수 있어야 한다는 말이 유행했는데, 여기서 "픽셀 대 픽셀"이라는 용어가 유래되었습니다. 간단해 보이죠? 하지만 크롬의 시장 점유율이 10%에 불과했던 시절, 그리고 웹킷(크롬), 게코(파이어폭스), 프레스토(오페라) 등 다양한 렌더링 엔진을 사용하는 여러 브라우저가 존재했던 시대였다는 사실을 알고 계셨나요? 그 당시에는 또 다른 악명 높은 문제아가 있었습니다. 그것은 오만하고 거만했으며, 우리 부모님 세대 모두가 사용하던 것이었습니다. 그 브라우저의 렌더링 엔진은 트라이던트였고, 이름은 IE, 즉 인터넷 익스플로러였습니다. 즉, 프런트엔드의 주된 적은 다양한 브라우저라는 뜻입니다. 이러한 브라우저들은 시스템(윈도우 또는 맥)에 따라 다르게 렌더링된다는 점에 유의해야 합니다. 또한 악명 높은 IE(인터넷 익스플로러)는 버전마다 다르다는 점에 유의하십시오. 따라서 다양한 브라우저에서 픽셀 단위의 정확한 변환을 구현하기 위해 프런트엔드 개발자는 수많은 규칙을 작성하고, 반복적인 테스트를 수행하며, 하루에 수만 번씩 인터넷 익스플로러를 저주해야 합니다. 결국 프런트엔드 개발자들은 IE의 시장 점유율을 지키면서도 IE6을 사용하는 부모님 세대에게 멋지고 세련된 페이지 경험을 제공하기 위해 타협해야 했습니다. 프런트엔드 개발자들이 얼마나 많은 노력을 기울였는지 아시나요? 다음 장: 반응형 디자인의 등장