본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다
패스트캠퍼스 환급챌린지란?
(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스
초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!
fastcampus.co.kr
https://fastcampus.info/4n8ztzq
임파선염으로 두통이 오지만... 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!
15일차 공부 시작!
오늘의 강의 주제는 15강부터 16강으로 다음과 같다. (17강도 들었지만 다음 챕터에서 하겠다.)
- 복잡한 UI 구현을 위한 준비작업
- 댓글 목록이 표시되는 아름다운 UI 만들기
(오늘도 마찬가지로 모자이크 처리..)
오늘의 학습 내용
* 복잡한 UI 구현을 위한 준비작업
UI 개발에서 가장 중요한 요소 중 하나는 사용자에게 시각적으로 편안하고 직관적인 환경을 제공하는 것이다. 이를 위해서는 레이아웃 설계뿐만 아니라 색상, 폰트, 아이콘과 같은 디자인 요소들을 신경 써야 한다. 단순히 내용을 나열하는 것에서 벗어나 요소 간 배치와 시각적 강조, 상호작용에 따른 스타일 변화를 주는 것이 핵심이다.
특히 개발자 혼자서 작업할 때는 효율적으로 고퀄리티 UI를 구현할 수 있는 외부 라이브러리의 도움을 받는 것이 좋다. 대표적으로 Tailwind CSS와 Font Awesome이 있다. 두 라이브러리는 빠른 개발과 유지보수성 그리고 일관된 디자인 적용에 많은 이점을 제공한다.
* Tailwind CSS로 레이아웃과 스타일 간편하게 관리하기
Tailwind CSS는 Utility-First CSS 프레임워크로, HTML class 속성만으로 세밀한 레이아웃과 스타일링을 구현할 수 있다. 예로 `bg-white`, `hover:bg-green-100`과 같은 클래스를 조합해 다양한 효과를 손쉽게 줄 수 있다. 직접 CSS 파일을 작성하지 않고도 규칙적이고 일관된 디자인을 유지할 수 있다는 점이 가장 큰 장점이다.
- 반응형 레이아웃 조정이 용이하다.
- 색상, 여백, 폰트 크기, 그림자 등 거의 모든 스타일 속성을 class로 관리할 수 있다.
- 유지보수나 확장 시 클래스 조정만으로 쉽고 빠르게 대응이 가능하다.
* Font Awesome으로 쉽고 예쁜 아이콘 사용하기
웹 UI에서 텍스트만으로 정보를 전달하면 가독성이 떨어지거나 전달력이 약해질 수 있다. 이를 보완하는 대표적인 방법이 아이콘 활용이다. Font Awesome은 다양한 테마와 스타일을 지원하는 아이콘 라이브러리로 CDN 링크만 추가해 바로 쓸 수 있다.
- 유저나 이메일 아이콘 등 상황에 맞는 아이콘을 쉽게 삽입할 수 있다.
- CSS class 기반으로 아이콘의 크기, 색상, 마진 등을 직접 조정할 수 있어서 디자인 일관성을 쉽게 확보할 수 있다.
이렇게 아이콘을 활용하면 단순 텍스트보다 직관적이고 시각적으로 풍부한 UI를 설계할 수 있다.
* 기타
- 두 라이브러리(Tailwind, Font Awesome)는 모두 cdnjs.com 또는 공식문서에서 최신 버전을 간단히 가져와 스크팁트를 추가만 하면 바로 사용 가능하다.
- 여러 기능을 가진 UI를 손쉽게 꾸밀 수 있으나 클래스가 길어질 수 있으니 사용하지 않는 스타일은 정리하고 중복 적용에 주의해야 한다.
- 재귀 호출(recursive call)은 함수가 자기 자신을 호출할 때 사용하는 개념으로, 트리 구조의 댓글이나 반복적인 데이터를 처리할 때 유용하게 쓰인다.
마치며
오늘도 환급 챌린지 15-16강 공부 완료!!
이번 강의는 UI를 꾸미기 위한 라이브러리와 사용법에 대해 알아보고 이전 진행했던 부분에서 UI와 코드를 개선하는 것이 주된 내용이었다. font-awesome은 예전에 php나 옛날 개인 프로젝트할 때 사용했던 기억이 있다. 그리고 tailwindcss는 워낙 유명하고 지금도 많이 쓰이고 있으며 나도 회사 프로젝트에서 활용하고 있다. 기초 강의지만 실제로 필요한 내용들을 많이 알려주는 것 같아서 좋다.
임파선염으로 두통도 계속 있고 속도 안 좋은데 언제 나을지 ㅠㅜ