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

프롤로그

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

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

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