소스 코드: https://github.com/soonitoon/dwitter
"드위터" 페이지(모바일) : https://soonitoon.github.io/dwitter

이 글은 Nomad Coder의 "트위터 클론코딩" 강의를 바탕으로 작성되었습니다.

---

2021년 2월 3일 아침

드디어 기나긴 컴포넌트 설명이 끝나고 CSS 파트입니다!🤗 지금까지의 포스팅도 마음만 먹으면 하루만에 써내려 갈 수 있을 것 같은데, 어느새 첫 포스팅 이후로 4일이 지났네요😭 반성해야겠습니다...

이번 CSS는 완성 후에 한 번 갈아엎는 과정을 거쳤습니다. 첫 번째 CSS가 너무 마음에 들지 않기도 했고, 친구들이 들어가서 실제로 글을 작성하는 모습을 보면서 제 프로젝트에 더 애정이 갔습니다.

CSS 역시 전체 코드가 아닌 중요한 부분과 작성 과정에서 많은 생각을 했던 부분 위주로 적겠습니다.✍️

모바일 접근성?

처음으로 모바일 버전📱 CSS 코드를 작성해보았습니다.

사실 모바일 우선 레이아웃을 적용해야 할 필요성은 친구들에게 테스트를 부탁할 때 느끼게 되었습니다.

사이트를 만들고 링크를 보내줄 때 대부분은 스마트폰으로 들어가 화면이 깨진다고 말합니다.🤷‍♂️🤷‍♀️

실제로 친구 중 한 명이 보내준 사진인데요, 보이는 결과를 만드는 데 급급해 임기응변 식으로 작성한 코드의 최후를 보는 것 같습니다...

결국 원래 코드를 임시 폴더에 옮겨놓고 통째로 삭제했습니다.🗑️

스타일 전반

제가 생각했을 때 첫 번째 CSS 코드의 가장 큰 문제는 CSS의 원리를 무시한 스타일링이었습니다.
CSS는 아무 잘못 없이 자신의 논리대로 코드에 따라 레이아웃을 잡아주었습니다. 하지만 저는 그 논리를 파악하는 대신, '보기에 그럴듯한' 결과를 만들어내기 위해 그때그때 상황과 용도에 맞지 않는 코드를 남발했습니다.

그래서 이번에는 CSS의 자연스러운 흐름을 최대한 따르기로 마음 먹었습니다.

세로로 긴 모바일 화면의 특성에 맞게 밑으로 쌓이는 block 구조를 최대한 활용하면서 거추장스러운 스타일 속성들을 최대한 줄이려고 했습니다.🏗️

reset

우선 CSS 리셋은 https://meyerweb.com/ 의 Reset CSS 코드를 활용했습니다.

그리고 제가 의도하지 않은, 추가로 설정해주어야 할 초기 세팅은 문제가 생길 때마다 검색해가며 코드를 추가했습니다.

button, input

우선 button이나 input 태그가 선택되었을 때 나오는 못생긴 테두리를 없애주었습니다.✂️

처음에는 두 태그를 스타일링 할 때마다 가상 선택자를 사용해서 지정해주었는데요, 저렇게 처음부터 지정해주는 편이 훨씬 효율적인 것 같습니다. 어차피 안 쓸 기본 스타일이니까요.

사파리 브라우저

이 문제는 배포 후 제 아이폰으로 접속했을 때 알게 되었는데요, 사파리에서 사이트에 접속하면 분명 button 태그의 스타일을 지정해주었는데도 불구하고 이상한 그라데이션 색으로 보이는 문제가 있었습니다.

바로 이런 색이었는데요...

검색 결과, 사파리에서 button과 input 태그의 appearance 속성 기본값 때문에 의도하지 않은 스타일이 적용된 것 같습니다.

위의 코드를 붙여넣어 appearance 속성을 제거했습니다.

모바일 기기에서 확대

이것 역시 모바일 기기로 테스트하면서 알게 된 문제입니다. 제 아이폰에서 input 태그를 누를 때마다 저절로 화면을 태그에 맞게 확대시켜주었는데, 이게 상당히 불편했습니다.😑

알고보니 HTML 메타 태그에 user-scalable=no 속성을 적용하면 되는 문제였습니다.

로그인 페이지

로그인 페이지 디자인은 Twitter 모바일 로그인 페이지를 거의 그대로 따라 만들었습니다.

아래 방향으로 쌓이는 block 구조를 기본으로 하고, 텍스트에는 margin-left에 전부 10xp씩 주어 왼쪽 경계로부터 떨어뜨렸습니다.

button과 input 태그는 좌우 margin을 auto로 해서 중앙정렬했습니다.

버튼을 누를 때 심심하지 않게 :active 가상 선택자의 background-color 속성으로 각각

• 트위터 색 버튼 : background-color: rgba(29, 161, 242, 0.8);
• 흰색 버튼 : rgba(29, 161, 242, 0.2)

을 주었습니다. 원래 색의 rgba 값에서 알파 값을 바꾸는 방식입니다.

메인 페이지

메인 페이지 구성은 다음과 같습니다.

• 네비게이션🧭
• 드윗 작성란✍️
• 전체 드윗 💬

그리고 드윗 작성란과 전체 드윗은 각각

• Home
• username profile

과

• 드윗 본문
• 수정 및 삭제(본인 드윗만)

으로 이루어져 있습니다.

네비게이션

네비게이션 바는 스크롤과 독립적으로 상단 영역에 고정되게 만들었습니다.

상단 고정을 위해 네비게이션 컨테이너에 position: fixed 속성을 주고, top: 0, left: 0으로 고정했습니다.

그리고 드윗 작성 form을 네비게이션 바로 밑에 붙여 고정하기 위해 역시 position: fixed 속성을 준 뒤, top을 네비게이션 바의 높이만큼(80px) 주었습니다.

마지막으로 두 요소 모두 z-index: 2 속성을 통해 하단의 드윗 부분에 가려지지 않도록 했습니다.

완성된 상단바의 모습입니다.

상단바 가림 문제

상단바에 fixed 속성을 주고 나서 당연하게도 밑의 드윗 부분 상단이 상단바에 가려졌습니다.

평소에 상단바를 만들 때는 이 문제를 해결하기 위해 body 태그에 padding-top 속성에 상단바의 높이만큼을 주었는데, react의 경우에도 똑같지 않을까 싶어서 처음에는 최상위 root div에 padding 속성을 주었습니다.

그러나 react 페이지는 root div를 모든 페이지에서 사용하기 때문에 로그인 화면에서도 상단 padding이 적용되는 문제가 있었습니다.

그래서 대신 dwitte-container에 padding: 110px 0 30px 0; 속성을 주었습니다. 상단바의 높이가 80px이니까 상하 padding을 30px씩 준 것이 됩니다.

드윗

배경색, 그림자

드윗들은 box-shadow로 그림자를 주고 배경과 구분될 수 있도록 배경에 하얀색과는 구분되는 미색을 넣었습니다.

16진수로 보면 #fbfbfd인데요, 애플 홈페이지에서 스포이트로 가져온 색입니다.전체적인 통일감을 해치지 않으면서 하얀 요소에 구분감을 줄 수 있습니다.

그림자를 빼더라도 묘하게 다른 색입니다!

getcssscan.com

드윗의 box-shadow는 https://getcssscan.com/css-box-shadow-examples 에서 적당한 코드를 복사해왔습니다. 마음에 드는 그림자를 선택하면 바로 붙여넣을 수 있는 CSS 코드를 복사해줍니다.

간편하게 예쁜 그림자를 넣을 수 있어서 자주 사용하고 있습니다.

React-Icons

Home 페이지에 쓰인 버튼은 ‘드윗’ 버튼을 제외하고 전부 React-Icos 라이브러리를 사용했습니다. 이미지 파일보다 사용하기 훨씬 간단하고 깔끔합니다.😀

https://react-icons.github.io/react-icons/

React-Icons 홈페이지입니다. npm install react-icons --save 명령어로 프로젝트에 설치한 후 사용할 수 있습니다.

아이콘을 사용하려면 먼저 아이콘 종류에 따라 import 해준 뒤에

이런 식으로 React 스타일로 간편하게 사용할 수 있습니다. 또한 CSS에서 color와 font-weight 속성으로 색깔과 크기를 지정해줄 수 있어 버튼을 만들 일이 있을 때는 꼭 사용하는 라이브러리입니다.

이 페이지에 보이는 톱니바퀴, 사진추가, 수정, 삭제 버튼 모두 React-Icons 입니다!

또한 각각의 드윗은 min-height 속성을 설정해서 본문의 길이가 짧아도 크기의 일관성이 유지될 수 있도록 했습니다.

이미지 추가

이미지 추가는 간단하게 구현했는데요, 이미지를 추가하면position: absolute를 통해 오른쪽 끝에 붙여주었습니다.

이렇게 드윗 작성란 오른쪽에 조그맣게 미리보기 이미지가 뜨게 됩니다.📷

profile

프로필 화면은 아래의 것들을 제외하고는 홈 화면과 동일합니다.

• 드윗 입력 대신 프로필 이름 수정란이 있습니다.
• 로그아웃 버튼
• 자신의 드윗만 보입니다.

로그아웃 버튼은 트위터 색과 어울리는 파스텔 톤을 찾고 싶어서 구글 로고 중 빨간 색을 사용했습니다.

지금까지 CSS 작성 중 제가 신경써서 작업했던 부분을 중심으로 적어봤는데요, 다음 포스팅은 아마 마지막 트위터 클론코딩 포스팅일 것 같습니다!