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

---

2021년 2월 10일 저녁

안녕하세요~ 오늘은 제가 만든 프로젝트 중 하나인 '드위터'의 업데이트 소식을 전해드립니다😃(이름에서 알 수 있듯이 트위터 클론 코딩 입니다!)

이번 업데이트는 단순히 한쪽 구석에 트위터 아이콘이 떠있던 로딩화면을 조금 더 예쁘게 바꿔보았습니다🎨

돌아가는 로딩 화면을 만들기 위한 방법으로 GIF를 넣는 방법도 있었는데요, 저는 CSS로 처리하는 편이 더 깔끔하게 보여서 여러 로딩 화면 CSS 코드를 보고 분석했던 것 같습니다.

로딩화면 개선 구현 과정

우선 로딩 화면을 좀 더 성의있게(?) 만들기 위해 App 컴포넌트 파일 안에 있던 init이라는 로딩 화면 코드를 없애고 loading이라는 새 js 파일과 CSS 파일을 만들었습니다.

Loading 컴포넌트

로딩 화면을 담당하는 컴포넌트 자체는 배경 div와 로딩서클 div로 이루어진 단순한 구조입니다.

CSS 로딩 에니메이션

로딩 애니메이션을 만들기 위해 정말 오랜만에 CSS의 animation 속성을 공부해봤습니다. 대학에서 웹프로그래밍 강의을 들었을 때 정말 다양한 애니메이션 효과를 실습해봤는데, 사용하지 않으니 기억나는 게 거의 없었습니다😓

'트위터 배경 색' 넣기

리엑트를 배우기 전에는 화면 전체에 배경을 넣을 일이 있으면 width: 100%, height:100% 속성을 준 div에 색을 입혔습니다.
그러나 화면을 잘라서 필요한 컴포넌트만 바꿔가며 붙이는 리엑트의 특성상 아무리 100% 속성을 줘도 화면에 꽉 차지 않았습니다.

열심히 관련 검색을 해본 결과... 리엑트에서 화면을 꽉 차게 하려면 뷰포트 단위를 이용하라는 조언을 얻었습니다.
배경 div에 width: 100vw, height: 100vh 속성을 준 결과 화면에 꽉 차는 배경을 만들 수 있었습니다!

지금 글을 쓰며 생각해보면 당연한 결과였습니다. 퍼센트 단위는 부모 요소가 기준이므로 100%로 설정해주어도 부모 요소의 크기가 최대 크기이지만, 뷰포트 단위는 브라우저의 크기가 기준이기 때문입니다.
다시 한번 CSS에도 논리가 필요하다는 걸 깨닫습니다💡

로딩 서클 만들기

로딩 사이클을 만들기 위해 div 태그에 크기를 지정해준 후, border-radius: 50% 속성을 통해 원을 만들어주고, border 속성으로 옅은 색의 회전 테두리를 만들었습니다.

그리고 border-top-color: #fff 속성으로 돌아갈 예정인 하얀 바를 만들어줍니다.

지금까지의 결과물입니다!

이녀석을 돌아가게 만들기 위해 spin이라는 keyframes을 만들었습니다.

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

transform: rotate(360deg)를 통해 한바퀴 돌아가게 만듭니다. 실제로는 원 전체가 돌아가는 것이지만 윗부분만 하얀색이기 때문에 마치 하얀색 바가 돌아가는 것처럼 보입니다.

마지막으로loading div에 animation 속성을 주고, 아까 만들어 둔 spin을 1초 동안, 처음과 마지막에 감속을 줘서, 무한대로 돌립니다. animation: spin 1s ease-in-out infinite

그럴싸한 로딩서클이 완성되었습니다✨

이렇게 업데이트 목록 중 제일 쉬운 <로딩 화면 만들기>를 구현했는데요, 지속적으로 다른 목록들도 완료해나갈 계획입니다🙃