<HtmlStudy /> 웹페이지 상황

1.  React UI  라이브러리 적용

곰곰이 생각해 보니깐 react 라이브러리를 한 번도 사용해 본 적도 없고 적용하면 내가 만든 것보다 편하게 사용하기 위해 왼쪽 nav 바를 React UI  라이브러리 material-ui  적용시켜 봤다.

전 홈페이지

material-ui 적용

엄청나게 간단하게 적용된 줄 알았던 라이브러리는 엄청난 대작업을 가져왔다.

내가 원래 만든 것도 있고 라이브러리는 구 리액트버전이라 적용시키는데 애를 먹었다. 하나하나 찾아보면서 2시간 정도 걸렸던 거 같다. 역시 사용할 때는 먼저 찾아보고 적용시키고 진행하는 게 베스트다. 기획의 중요성을 다시 한번 깨닫는다.

내비게이션의 아이콘들도 Material UI를 사용했으니 한번 React 라이브러리를 사용할 때 참고 사이트로 좋은 거 같다.

https://mui.com/material-ui/getting-started/

Overview - Material UI

 

2. 태그 설명 페이지 Skelton UI 적용

Skelton UI 란 스켈레톤 UI는 페이지나 앱의 콘텐츠가 로드되는 동안 사용자에게 표시되는 비어있는 버전의 페이지나 앱의 레이아웃을 의미한다. 이는 사용자 경험을 향상하기 위한 로딩 전략 중 하나로, 콘텐츠가 완전히 로드되기 전에도 사용자에게 앱의 구조를 보여줌으로써 기다림의 불편함을 줄여준다.

예시로는 유튜브가 있다.

로딩중~

본 홈페이지에서도

로딩중

로딩 끝

Skelton UI는 Chakra UI를 사용했다. 여기도 정말 이쁜 UI 컴포넌트들이 많은 거 같다.

https://v2.chakra-ui.com/docs/components/skeleton/usage

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a

3. 이후 글 작성

html 태그는 별거 없기 때문에 다른 홈페이지와는 다르게 css를 좀 더 강조하는 사이트가 되고 싶기 때문에 어떻게 하면 좀 더 효과적으로 알려주거나 부지런히 작성해야 할 거 같다.

웹디자인에 관심 있으신분은 bp4sp4@naver.com 연락주시면 언제나 환영입니다~