CSS 개발자가 하는 일과 필요한 이유

CSS 개발자는 방문자의 브라우저에 세련되고 스타일이 지정된 제품을 제공하는 것을 주요 책임으로 하는 웹 전문가입니다. 실제로 모든 웹사이트는 CSS를 사용하지만 CSS는 종종 현대 웹 개발 스택에서 "동등한" 것으로 간주되지 않습니다. 불행히도 이러한 잘못된 인식은 CSS를 당연하게 여기거나 어느 정도 간과하게 만들 수 있습니다.

비 CSS 개발자가 CSS를 처리하도록 허용하면 코드에 CSS 해킹 및 버그가 도입되는 경우가 많으며 개발자에게 불필요한 좌절감을 줄 수 있습니다. 이 기사에서는 모든 사이트에 신뢰할 수 있고 전문적인 CSS 개발자가 필요한 이유를 더 잘 이해할 수 있도록 모든 사람에게 해당 작업이 포함하는 내용을 알려드리고자 합니다.

CSS 개발자는 무엇을 하나요?

기본부터 시작하겠습니다. CSS가 왜 그렇게 중요하며 CSS 개발자는 정확히 무엇을 해야 합니까?

CSS는 특정 언어이므로 단독으로 존재할 수 없습니다. 이해하려면 HTML이 필요합니다. 따라서 CSS 개발자가 가장 먼저 하는 일은 HTML 코드를 작성하는 것입니다.

깔끔한 HTML 작성은 항상 중요합니다

간단하고 깨끗하며 적절하게 구성된 HTML을 작성하는 것은 겸손한 HTML 문서가 최종 사용자에게 가장 먼저 전달되는 것이기 때문에 큰 책임입니다.

프로덕션 준비가 된 HTML 문서를 작성하는 경우 웹 사이트를 최대한 활용하려면 문서 헤드에 모든 필수 및 선택적 태그를 포함해야 합니다. 올바른 문서 유형, 언어, 메타 태그, 파비콘, 로딩 기술 및 SEO 설정에 대해 이야기하고 있습니다.

웹 사이트의 성능과 접근성을 높이고 청중과 검색 엔진, 기타 서비스 및 도구에 더 많이 노출되도록 하는 데 도움이 되는 모든 것입니다. HTML 문서의 본문도 부풀려져서는 안 됩니다. 시맨틱 HTML 태그를 사용할 때, 필수 HTML 속성을 추가하는 방법, 깊은 중첩 또는 분할을 피하는 방법을 아는 것은 무시해서는 안 되며, 오히려 프로젝트의 맨 처음부터 구현해야 합니다. 전문 개발자는 프로젝트 중간에 모범 사례를 따르기 시작하지 않지만 HTML과 같이 겉보기에 기본적인 것조차도 종종 잘못 수행됩니다.

전반적인 디자인은 종종 다양한 HTML 구성 요소를 구성하는 방법을 결정합니다. CSS 개발자는 디자이너와 긴밀하게 협력하며 모든 디자이너가 동일한 도구를 사용하여 디자인을 제공하는 것은 아닙니다. Sketch, Photoshop, InVision 또는 Figma에 익숙하고 디자인을 "슬라이스"할 수 있는 것은 CSS 개발자에게 필수 기술입니다. 디자인을 동시에 적용할 수 있도록 구성 요소를 구성하는 방법을 항상 염두에 두어야 합니다. BEM 또는 OOCSS와 같은 좋은 명명 규칙을 사용하면 부풀려진 HTML이나 유지 관리할 수 없는 CSS 코드 작성을 방지할 수 있습니다.

자바스크립트는 어디에나 있다

모달이나 툴팁과 같은 일부 구성 요소는 대화형이어야 합니다. 이를 위해서는 "심층" JavaScript가 아니라 JavaScript 이벤트 및 DOM 처리에 대한 좋은 이해가 필요한 경우가 많습니다. DOM 처리는 사용자 리소스를 고갈시키고 웹 사이트를 느리게 만들거나 더 심하게는 충돌을 일으켜 완전히 응답하지 않게 하는 것을 원하지 않기 때문에 어려울 수 있습니다.

JavaScript 세계는 빠르게 진화하고 있으며 때로는 새로운 프레임워크와 도구가 매일 나타나는 것처럼 보입니다. JavaScript의 엄청난 인기로 인해 최신 모범 사례를 사용하고 최종 사용자에게 가장 즐거운 경험을 제공하려면 루프를 유지하는 것이 중요합니다.

CSS

많은 사람들이 CSS가 JavaScript와 거의 같은 속도로 발전하지 않는다고 주장하지만 CSS도 마찬가지입니다. 그러나 CSS 변수, CSS 그리드 또는 Flexbox와 같은 새로운 기능을 마스터하려면 시간이 필요합니다.

그런 다음 오늘날에도 여전히 문제가 될 수 있는 브라우저 지원이 있습니다. 귀하의 사이트는 최신 브라우저에서 백만 달러처럼 보일 수 있지만 레거시 브라우저에서는 그렇게 많지 않습니다. Flexbox는 IE11에서 지원될 수 있지만 다시 예상대로 작동하지 않을 수 있습니다. 이러한 문제를 피하는 방법을 아는 것은 CSS 개발자 작업의 일부입니다.

고맙게도 커뮤니티는 매우 도움이 되며 Flexbugs 또는 Gridbugs와 같은 사이트는 많은 시간을 절약할 수 있습니다.

CSS 도구, 기술 및 원칙

때때로 우리는 신뢰할 수 있는 코드를 제공하는 데 도움이 되는 Grunt, Gulp 및 webpack과 같은 작업 실행기 또는 번들러와 같은 도구에 의존할 수 있습니다. linter, minifier, babel 또는 PostCSS로 코드를 강화하여 코드를 변환할 수 있습니다.

그런 다음 CSS 개발자의 일상적인 작업의 일부인 다양한 글꼴, 타이포그래피, 이미지, 아이콘, 아이콘 글꼴, 애니메이션, 전환 및 기타 추상적인 측면을 고려해야 합니다. 모든 단일 기능에는 특정성, 제한 사항, 문제 및 솔루션이 있습니다. 더 많은 기능과 기술을 숙달할수록 프로젝트에서 구성 요소의 스타일을 지정하고 구현하기가 더 쉬워집니다.

많은 CSS 속성과 값이 있으며 모든 것을 알 수는 없습니다. 다행히도 우리 도구, 특히 코드 편집기와 개발 도구가 도움이 됩니다. 그러나 Z-색인 문제를 해결해야 하는 경우 도구도 골치 아픈 문제를 해결하는 데 도움이 되지 않습니다. 실패는 배우는 가장 좋은 방법입니다.

CSS로 작업할 때 이것이 특히 사실이라고 말하고 싶습니다. 그 이유는 다음과 같습니다.

Z-색인 문제를 해결하려고 시도한 적이 없다면 스택 컨텍스트에 대해 배우지 못할 것입니다. Bootstrap 클래스를 재정의하려고 시도한 적이 없다면 특정성에 대해 배우지 못할 것입니다. float 문제를 해결하려고 시도한 적이 없다면 상자 모델에 대해 배울 수 없습니다.

때로는 해결책은 간단하지만 질문만 하는 것은 어렵습니다. 다른 언어와 비교할 때 내 루프가 작동하지 않는 이유를 알 수 없습니다. CSS에서 문제를 해결하려면 전체 컨텍스트가 필요하며 이는 종종 많은 사람들이 이해하지 못하는 부분인 cascade 입니다.

캐스케이드(Cascade)는 CSS의 최고의 기능이며 귀하에게 불리하지 않고 귀하에게 적합해야 합니다. 일부 개발자는 CSS-in-JS와 같은 사용자 정의 접근 방식을 발명하여 이 문제를 해결합니다. React와 같은 캡슐화된 환경에서 CSS를 포장하면 다른 곳에서 사용할 수 없습니다. 이것이 확장 가능한 플랫폼에서 원하는 접근 방식인지 의심스럽습니다. 캐스케이드에 문제가 있는 경우 포용하는 방법을 배운 다음 길들이는 방법을 배웁니다.

제가 이 글을 준비하는 동안 Max Bock이 CSS 사고방식에 대해 썼는데, 이것이 바로 CSS 개발자가 해야 할 일입니다. CSS 개발자는 기본 값과 컨텍스트를 재정의하지 않고 가능한 한 적은 코드를 작성하면서 상자 안에서 생각하고, 콘텐츠 수정을 예측하고, 고정된 숫자를 피합니다.

CSS 개발자가 필요한 이유는 무엇입니까?

대부분의 프론트엔드 또는 전체 스택 개발자는 CSS 코드를 작성할 수 있습니다. 그러나 그들 모두가 HTML 코드를 복잡하게 하거나 필요하지 않은 JavaScript에 의존하지 않고 모든 CSS 버그를 수정하거나 디자인을 구현할 수 있는 것은 아닙니다.

전문 CSS 개발자는 코드를 최종 세부 사항까지 신경쓰고 레이아웃과 구성 요소, 심지어 가장 복잡한 구성 요소를 만드는 것을 즐깁니다. 모든 문제나 버그를 해결하는 방법을 알고 있습니다.

CSS 코딩 표준

코드를 작성하기 전에 일반적으로 코드 작성에 대한 몇 가지 기본 규칙을 갖는 것이 좋습니다. CSS 개발자는 코딩 표준을 존중해야 합니다. 이는 프로젝트의 유지 관리 가능성과 확장성을 위해 필수적입니다.

프로젝트 전체에서 사용할 명명 규칙을 선택합니다. 초기에 명명 규칙을 설정하면 개발자가 더 좋고 조직적인 코드를 생성하는 데 도움이 될 수 있습니다. 또한 HTML 코드만 읽어도 프로젝트에 참여하는 모든 사람이 구성 요소 구조와 구성 요소와 요소 간의 관계를 이해하는 데 도움이 될 수 있습니다.

CSS에서 들여쓰기, 선택기 유형, 약식 속성, 단위를 처리하는 방법을 결정합니다. 예를 들어, 코딩 표준이 rem 단위의 사용을 제안하는 경우 픽셀 단위를 사용하지 마십시오. 모든 사람은 고유한 작문/코딩 스타일을 가지고 있지만 전문가로서 모든 개념을 채택하고 더 중요하게는 모든 개념을 이해할 수 있어야 합니다.

CSS 디자인 구현

디자인을 코드로 변환하기 전에 모든 페이지, 레이아웃 및 구성 요소를 이해하는 데 시간을 들여야 합니다. 가능하면 모든 페이지를 분석하고 페이지 및 구성 요소 목록을 만들고 패턴을 찾으십시오.

더 많은 페이지에 있는 구성 요소를 발견하면 주변 환경을 인식하고 독립 실행형 구성 요소로 생각해야 합니다. 카드나 목록과 같은 유사한 구성 요소가 있는 경우 동일한 구성 요소의 변형이 있을 수 있습니다. 이렇게 하면 HTML 코드를 재사용하고 CSS 코드를 약간만 작성하여 수정된 것처럼 보이게 할 수 있습니다.

타이포그래피 및 간격과 같은 다른 영역에서 패턴을 찾는 것도 좋은 생각입니다. 때로는 개별 페이지가 아닌 전체 프로젝트에서 사용할 수 있는 도우미 클래스를 갖게 됩니다.

CSS 코드 구성

CSS 개발자는 코드를 구성하고 모두를 위한 의미 있는 구조를 만들어야 합니다. CSS 프로세서와 같은 도구를 사용할 때 CSS 개발자는 컴파일된 코드를 생성하는 프로세스를 문서화해야 합니다.

필요한 경우 CSS 개발자는 스타일 가이드를 만들 수 있습니다. 스타일 가이드는 새 페이지를 만들거나 기존 페이지에 접근하는 방법을 결정할 때 참조가 될 수 있습니다. 내 조언은 시각적 컨텍스트가 있을 때 결정을 내리는 것이 훨씬 더 쉽기 때문에 전체 팀이 스타일 가이드를 전 세계적으로 사용할 수 있도록 하는 것입니다. 스타일 가이드에는 색상 팔레트, 타이포그래피 규칙, 코딩 표준 및 정적 페이지가 포함될 수 있습니다. 예산과 상상력을 제외하고는 제한이 없습니다.

프로덕션의 CSS 코드

CSS 코드를 작성한다는 것은 브라우저 간 문제, 버그, 애니메이션, 전환, 반응성 및 인쇄 스타일을 처리하는 것을 의미합니다. 이러한 기능 중 상당수는 만능 개발자가 쉽게 관리할 수 없습니다. 나는 여기까지 가서 이것이 전반적으로 가장 선호하지 않는 CSS 작업이며 모든 개발자가 처리 방법을 아는 것은 아니라고 말할 것입니다. 반면에 전문 CSS 개발자는 모든 버그, 브라우저 및 환경을 염두에 두고 코드를 생성하는 방법을 알고 있거나 최소한 알고 있어야 합니다.

현대적인 접근 방식을 사용하는 것도 한 가지 방법이지만 이전 브라우저를 지원하고 모션 감소와 같은 사용자 설정을 존중하는 것도 무시해서는 안 됩니다.

CSS 개발자는 HTML 및 JavaScript 코드도 작성합니다. 이는 자산 전달이 CSS 개발자의 책임임을 의미합니다. CSS 개발자는 글꼴 로드, 중요한 CSS 추출, 지연 및 비동기 JavaScript 로드 사용, 반응형 이미지 제공을 담당해야 합니다.

이러한 기술 중 어느 것도 구현하기 쉽지 않으며 만병통치약도 없습니다.

CSS 개발자가 할 수 있는 일

위의 모든 내용은 전담 CSS 개발자가 필요한 이유를 설명합니다. 다음은 그들이 처리하는 몇 가지 중요한 사항입니다.

• 모든 프로젝트 구성원이 코딩 표준을 준수하도록 합니다.
• 디자인 구현
• 코드 구성
• 코드 작성
• 버그 수정
• 새로운 기술에 대해 알아보기
• 코드 개선

마무리

너무 오랫동안 CSS 개발자 역할의 존재와 중요성에 대한 질문은 건설적이고 의미 있는 토론을 장려하지 않았습니다. CSS 개발자를 적절한 역할로 한 번에 동의하고 인정하도록 노력합시다.

그의 기사 Great Divide 에서 Chris Coyier는 기술 리더 중 일부를 인용했으며 대부분은 현대 JavaScript 프레임워크에 대한 지식이 필요하지 않은 CSS 기반 역할이 있어야 한다는 데 동의합니다. "단순한 CSS" 이상을 알고 있으면 도움이 될 수 있지만 역할이 있어야 하며 JavaScript 기반 역할과 동일하게 허용되어야 합니다.

결국, 제품을 완벽하게 연마할 수 있는 전문 전문가의 손에 제품을 맡기시겠습니까, 아니면 충분히 만족 하시겠습니까?

Toptal 엔지니어링 블로그에 대한 추가 정보:

• CSS에서 SVG 애니메이션에 접근하는 방법