뫙뭉

웹사이트나 애플리케이션에서 로딩 중인 페이지를 효과적으로 보여주는 방법 중 하나가 **스켈레톤 로딩(Skeleton Loading)**입니다. 스켈레톤 로딩은 실제 콘텐츠가 표시되기 전에, 콘텐츠가 배치될 위치에 미리 회색이나 반투명한 블록을 띄워 보여주는 방식으로, 사용자는 로딩을 기다리면서도 화면 구성을 미리 파악할 수 있습니다. 이번 글에서는 스켈레톤 로딩 애니메이션이 무엇인지, 그리고 CSS를 활용해 간단하게 구현하는 방법을 단계별로 설명해 보겠습니다. 스켈레톤 로딩이란? 스켈레톤 로딩은 웹이나 모바일 앱에서 콘텐츠가 로드될 위치에 기본적인 블록 형태를 미리 보여주는 방법입니다. 사용자는 콘텐츠가 나타날 위치를 미리 시각적으로 인지할 수 있기 때문에 로딩을 기다리는 동안의 불편함이 줄어들고, UX..

웹사이트에 심심함을 덜어줄 무언가가 필요하다!! 얼마전에 포트폴리오를 재정비할 계획이 있었다.사실 신입 포트폴리오, 심지어 비전공자라 하면 쓸 말이 많지가 않더라. 나만 그런것인가...그렇다면 뭔가 심심하지 않은 애니메이션으로 시각적 즐거움을 채우면 좋지 않을까 라는 생각이 자연스럽게 들게된다.뭔가 샤랄라~ 하는 느낌으로 한글자씩 나타나는 애니메이션을 넣으면 좋겠다라는 생각에 일단 코드를 생각나는대로 끄적여 보았다. 참고로 이와 함께 샤랄라~~ 하는 느낌이 화면에 나타나는 순간에 발동되길 바란다면, 관련 글이 있으니 참고하면 좋을 것 같다. (물론 내가 작성한 글이다 ㅎㅎ)2022.01.24 - [개발자일기/Tutorial] - 화면에 나타나면 애니메이션이 작동되게 하라!(CSS, VanilaJS) 생각..

예전부터 즐겨보던 유튜브 채널인 Online Tutorial 에 흥미로운 영상이 올라왔다. 원본영상: https://www.youtube.com/watch?v=ShPPkZEeLPo&t=662s Circular Navigation, 활성화 되면 원형으로 메뉴가 펼쳐지는 메뉴 네비게이션! 다른 프로젝트를 진행하며 막힘의 연속에 지쳐가고 있을 때 머리도 식힐겸 가볍게 만들어 볼 것이 생겨 신이 났던 것 같다. 사실 영상을 보며 따라서 코드만 배껴 쓰면 만들어지는 기능이지만 그렇게 하면 당연히 의미가 없으니 영상은 아이디어를 얻는 소스일 뿐! 시연 영상만 보고 처음부터 혼자 만들어 보려고 노력하였다. 사용 기술은 HTML, CSS, VanilaJS이다. 디자인 요소가 강조된 튜토리얼이다보니 JS는 active ..