CSS 공부는 어떻게 해야 하나요 - 실전편

teo.yu·2021년 12월 7일
55

입문 + CSS

목록 보기
4/8
post-thumbnail

프롤로그

CSS 공부는 어떻게 해야 하나요 - 이론편을 바탕으로 어떻게 하면 연습하기 좋을지 방법에 대해서 공유 해보고자 합니다.

지금은 시대가 많이 바뀌어서 figma, adobe xd, sketch와 같은 UI 디자인도구와 제플린과 같은 handoff툴이 발전되어 있고 디자이너와 협업을 하는 과정에서 당연히 이런 도구들을 사용할 것이기에 이 중 하나 정도는 친해지는 것이 좋습니다.

저는 그중에서 figma을 통해서 연습하는 방법을 공유합니다. figma가 개인적으로는 이 중에서 제일 무난하면서도 AutoLayout과 같은 기능들이 CSS 스펙을 제일 잘 반영해준다고 생각하기 때문입니다.

먼저 figma에서 디자인을 찾아보자.

figma가 좋은 점 중에 툴 내에서 에코시스템이 굉장히 잘 갖추어져 있다는 점도 있습니다.
연습을 할만한 좋은 디자인 샘플들이 너무 많습니다.

초창기 연습을 하실 때에는 모바일 페이지를 추천드립니다. 요새 웹 개발의 방향성이 반응형에 "Mobile First" 를 추구하고 있기도 하고 모바일이 만드는 UI의 양이 적고 배울 것들이 많아서 모바일 페이지를 먼저 해보시는 것을 추천합니다.

Mobile First
1) 데스크탑보다 모바일의 점유율이 높아지면서 2) 그리고 모바일 UI를 먼저하고 데스크탑 UI를 채워가는 것이 훨씬 더 디자인을 수월하기 때문에 가급적 모바일을 먼저 디자인하자는 원칙

아래 링크를 통해서 피그마에 있는 모바일 페이지 샘플들을 찾아 보실 수 있습니다.

https://www.figma.com/community/mobile_design

이 때 골라야할 원칙은

1) 예쁘고 충분히 본인의 취향이 반영이 된 다자인일것! (그래야 외부에 자랑하고 싶은 동기부여가 됩니다.)
2) 컴포넌트가 분리되어 있고 충분한 양의 다른 페이지들이 존재하는 것
3) 너무 이미지 위주로 디자인 보다 CSS로 만들 수 있는 디자인 요소들이 다양할 것
4) 가급적 AutoLayout을 충분히 사용하고 있을 것

대충 이런 스타일이 좋습니다.
https://www.figma.com/file/OYeXLFUEPthD14QjZS83WV/Wisecrypto-Community?is-community-duplicate=1&fuid=920622852180572467

그래도 꼭 본인이 다른걸 골라 보세요!

마음에 드는 걸 골라서 duplicate를 한 다음 하트를 눌러주는 센스도 있지 맙시다.

CSS 개발은 속도와 정확성이 중요하다. 숙달에 신경쓰자.

CSS는 학습이나 작업 난이도가 어려워서 어려운게 아닙니다. 덩치가 커졌을때 관리를 하는 부분이 어렵죠. 이후 컴포넌트를 만들고 관리하는 하는 연습도 같이 병행을 하셔야 합니다.

그리고 개발해야 하는 양이 적지 않다보니 여기서 들어가는 품이 많습니다. 그러다보니 일이 지체가 되고 딜레이가 되다보면 늘어지지 않게 하려면 자신만의 방식에서 숙달이 되어야 합니다.

여기를 margin을 넣어야 하나? 여기는 padding을 넣어야 하나? 여기는 absolute인가? 여기를 div를 하나 더 감싸야 되나?

이런 고민들을 하지 않고 그저 눈에 보이는 대로 만들 수 있는 편이 좋습니다.

그래서 AutoLayout으로 만든게 있다면 지난 번 글에서 배운 방식대로 그대로 구현을 하면서 익숙해지도록 합시다.

inspect에 CSS코드를 보여주나 모든게 필요하지는 않습니다. 어떤 css는 가져오고 어떤 css는 안 가져와도 되는지 어떤 식으로 태그를 만들면 되는지 이러한 본인만의 루틴과 원칙을 만들고 숙달하는 쪽으로 연습의 포커스를 두시면 좋습니다.

CSS는 당연히 적게 쓸 수록 좋습니다. 중복을 가능하면 제거를 하되 너무 집착하지는 마세요.

한번쯤은 이미지만 보고 다시 만들어보세요.

현업에서는 툴이 있으니까 굳이 안써야 할 이유는 없지만 어떤 경우에는 디자이너없이 작업을 해야 하는 경우도 더러 있습니다. CMS와 같은 콘솔류의 작업을 하거나 프로토타이핑이나 개인작업등을 할 때도 있기 때문입니다.

그리고 무엇보다

  1. CSS를 타이핑해서 화면을 만들어가면서 CSS 속성을 확실히 익히기 위함
  2. 디자인을 보고 어디까지가 하나의 그룹(혹은 레이아웃)으로 묶어야 하는지 감각을 키우기 위해서
  3. 그리고 디자인 감각을 키우기 위해서

이니 한번쯤은 이미지만 보고 만들어 보기를 권합니다.

(한번쯤은 이라고 기술한 이유는 inspect를 한번 경험하고나서 없이 하려면 답답하고 미련한 느낌이 들어 오래하기 힘들어서 그렇습니다;)

디자인 감각

그러면서 디자인 감각을 익히도록 합시다. 저도 디자인에 소질은 없지만 적어도 디자인적으로 이상해보이는 것을 눈치채지 못하면 내가 뭘 빼먹었는지 영영 모릅니다. 보톤 디자이너분들이니 다 만들어지면 필터링을 해주시지만 이게 미묘하게 다른 경우가 자주 생기면 신뢰감을 주지 못합니다.

그리고 혼자서 화면을 만들어야 하는 경우도 생길텐데 가끔 디자이너 없이 개발자들이 만든 화면을 보면 답답할 때가 있는데 여러분도 저도 그런 개발자가 되지 맙시다! 그러니 자주쓰는 수치나 간격, 레이아웃 등을 익혀두시는 것도 좋습니다.

https://cantunsee.space/

이러한 것을 키워주는 재미난 사이트도 있네요. 한번쯤 재미로 해보시길 바랍니다.ㅋ

컴포넌트와 mock 데이터, 그리고 연결

현대에 와서는 프레임워크를 반드시 쓸 것이기 때문에 원페이지 형태로 연습을 하는 것은 좋지 않습니다.

반복되는 HTML, CSS는 하나의 컴포넌트로 만들어서 재사용을 하도록 분리하도록 하세요.
(요 근래 느끼는 거지만 최근 현업에서는 요 작업이 제일 머리가 아픈것 같습니다. 어디까지가 재사용이니!? ㅠㅠ)

목록과 같은 UI의 반복적인 데이터는 임시로 mock데이터를 만들어서 데이터를 바인딩을 시켜 두도록 합시다.

그리고 버튼이나 링크로 페이지 이동 등은 연결을 해서 완성된 느낌을 주도록 하세요.

겸사 겸사 프레임워크와 컴포넌트 기반의 디자인 작업을 꼭 같이 연습해주세요.

무엇보다 실전이 제일 중요!

이제 figma로 연습이 되었고 속도가 붙었다고 생각이 되면 실전을 해보세요. 지인 중에 디자이너가 있다면 구현을 해주는 것도 좋고 돈을 받고 CSS만 외주를 해보는 것도 좋습니다. (그럴려면 포트폴리오가 있어야 할테고 포트폴리오는 figma를 통해 만든 샘플 사이트를 배포해서 확보해보세요.) 돈을 받고 외주를 하는 것은 익숙치 않은 환경에 떨어져이는데 해야만 하는 동기부여가 되는 아주 성장하기 좋은 환경입니다.

무엇보다 CSS의 경우는 디자인을 그대로 구현해주는 것도 있지만 중간에 수정/변경을 계속하면서 겪는 이슈들을 체험해보는것도 필요한데 역시 여러 동료들과 서비스를 만들어 보는 것 만큼 좋은 방법은 없는 것 같아요!

그리고 hover나 active, 말줄임, absolute, 에니메이션등의 동적 구성들은 실제 동작되는 서비스와 결합하지 않으면 크게 와닿지 않는 작업이라 정적페이지가 숙달이 되면 서비스를 만들면서 챙겨나가 보세요.

끝으로...

CSS 공부는 어떻게 해야 하나요 - 이론편과 대구를 이루기 위해서 작성해는데 알려드릴 것이 별로 없네요.

실전 연습에 무슨 팁이 있겠습니까?... 공부에는 왕도가 없는 법이지요.

경험한 만큼 성장한다는 것은 진리이니 재밌고 예쁜 디자인 많이 많이 만들어보시길 바랍니다.

profile
AdorableCSS를 개발하고 있는 시니어 프론트엔드 개발자입니다. 궁금한 점이 있다면 아래 홈페이지 버튼을 클릭해서 언제든지 오픈채팅에 글 남겨주시면 즐겁게 답변드리고 있습니다.

13개의 댓글

comment-user-thumbnail
2021년 12월 7일

보면서 열심히 공부하고 있습니다! 감사합니다!

1개의 답글
comment-user-thumbnail
2021년 12월 10일

테오님의 경험도 듣고싶어요!!
어떤방법으로 공부하셨는지!!

1개의 답글
comment-user-thumbnail
2021년 12월 17일

잘보고 갑니다~!

1개의 답글
comment-user-thumbnail
2023년 5월 3일

테오님 글 너무 좋아서 매일 1~2개씩 읽고 있습니다. 읽기만 하고 창을 닫아버리는게 마음이 쓰여서 velog 회원가입하고 오늘부터 하트 누르고 갑니다! ❤️ 항상 좋은 글과 생각 공유해주셔서 정말 감사합니다.
(+ 테오님 오픈채팅방 참여하고 싶은데 인원이 꽉차서 입장이 거부되더라구요.. 혹시 대기할 수 있는 방법도 있을까요? )

1개의 답글
comment-user-thumbnail
2023년 12월 29일

안녕하세요 오래 된 글인데도 댓글 남겨 봅니다.
피그마에서 디자인 된 화면을 CSS로 옮기려다보니 피그마 에서는 px를 사용해서
반응형이 안돼 스크롤이 생기거나 느낌이 좀 다른데 반응형 생각해서 작업 하는게 좋을까요?
그렇다고 px를 안쓰고 반응형으로 하려고 하니 완전 똑같이는 안만들어지네요..

특히나 모바일 화면에서 고정 값으로 했을 경우 작은 크기의 디바이스의 경우 좌우 스크롤이 생겨서
UX가 좋지 못합니다. 모든 크기에 대응되는 디자인을 주지 않는다면 반응형으로 만드는게 맞을까요?
일반적인 협업 과정에서도 궁금합니다.

1개의 답글
comment-user-thumbnail
2024년 1월 4일

** 대댓글로 작성 했는데 혹시 알람이 가지 않을까 댓글로 다시 남겨봅니다.

제가 어디서 줏어 듣기론 px 값은 고정된 값이라 반응형으로 만들기 어려워
em, rem, vw, vh, % 같은 단위를 사용 해야 된다고 들었습니다. 실제로 제가 Figma 에서 Frame을 클릭해서 나오는 width와 height를 그대로 옮겨 쓰니 작은 해상도에서 가로 스크롤이 생겨서 불편 하더라고요. 그래서 Figma에서 width와 height 가 써져 있지만 나는 %단위를 써야 하나? 싶어서 질문 해봤습니다.

달아주신 댓글을 보니 AutoLayout 에서 제공하는 3가지가 유동적으로 width와 height 를 적용 해주고 있는 것이라고 이해해도 괜찮을까요?
일단 Figma의 AutoLayout부터 공부를 해야겠습니다 흑..

협업 관련해서 질문 드린 것도 디자이너 분이 px 단위로 Layout 을 잡아 주시면
작은 해상도에서 스크롤이 생기거나 의도와는 다르게 만들어 지진 않을까?
예를 들어 만약 padding이 15px 이라고 가정했을 때 작은 해상도에서 15px를 쓰면 안의 컨텐츠가 다르게 보이지 않을까? 하는 생각 이었습니다. (줄바꿈 이라던지..) 그래서 현업 에서는 사이즈 별로 혹시 padding 값을 다르게 전달 받는가? 하는 생각이 들어 질문 드렸습니다.

아주 오래전 어딘가 유튜브 댓글창에서 테오님의 댓글을 보고 흘러 들어와
한 1년은 본 것 같은데, 한번도 본 것을 적용 해보거나 한 적이 없었습니다.
친절히 댓글도 달아주셨으니 이번 기회에 열심히 해야 될 것 같은 기분이 듭니다.
2024 년에도 좋은 글들 부탁 드립니다 :)
감사합니다.

1개의 답글