# 부트스트랩 그리드 시스템 사용 ![스크린샷 2025-03-11 오전 12.02.04](https://hackmd.io/_uploads/B1hY7waskx.png) **코드**: https://codepen.io/ohworry/pen/raNzvqe 스페이싱은 클래스 전역 설정으로 1차 완료한 뒤 필요한 곳만 추가로 주는 게 코드 중복이 덜할테지만.. 먼 옛날 부트스트랩 쓰던 기억을 되살릴 겸 최대한 의도적으로 많이 써봤다. 컬러톤 맞춰 배치하고싶은 곡이 많았는데 프리뷰를 제공하지 않는 음원이 대부분이라 지쳐서 적당히 골랐다. (~~노래 고르는데 2시간 걸림.. 다들 그러지?~~) [Spotify](https://open.spotify.com/)의 플레이어 기능을 iframe으로 사용했기 때문에 콘텐츠 프로바이더의 [Design & Branding Guidelines](https://developer.spotify.com/documentation/design)를 참고해서 덜 번거로운 것만 적용했다. *글로벌 대겹이라 그릉가.. 별 게 다 있네.* <br> 코드펜의 HTML 인풋은 원래 body 영역에 들어갈 내용의 마크업만 하고, 외부 CDN으로부터 정적자원을 받아와야할 때는 인풋 최상단에 아래와 같이 넣어주면 되는데 스타일이 깨지는 현상을 발견해서 HTML을 통째로 넣었다. 코드펜이 제공하는 콘솔창을 봐도 원인이 안나와서 왜인지는 아직 모르겠다. 샌드박스가 이래서 불편하다. ```htmlembedded! <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> ``` ![image](https://hackmd.io/_uploads/rkl6NP6ikx.png) *Just HTML that goes in the <body> goes here. 라고 워닝싸인이 떠있어서 신경에 매우 거슬림..* <br> # 챗쥐피티와 함께한 리팩토링 작업 **코드**: https://codepen.io/ohworry/pen/XJWaxYz UI 개편 방향을 잡는 대화만 30분은 한 것 같다. 버그도 잡고 의도를 담은 UI 개선도 하고 **멋도 부리고**싶었다. 기존에 만든 페이지는 콘텐츠가 고작 8개의 아이템 뿐이라 화면이 비어보였기에 조금 더 화려한 느낌을 얻고 싶었다. 그리고 모바일 접속 시 카드를 클릭하면 플레이어 영역을 꼭 한 번은 스크롤해줘야 브라우저에 페인팅이 되는 문제가 있었다. 또, 이리저리 여백을 주는 연습을 한다고 클래스를 여기저기 넣어두어서 이것도 예쁘지 않은 요소였다 ## 1. 최상단에 전광판 영역 추가 위와 같은 문제를 해결하기 위해 사이트에 들어왔을 때 강한 애니메이트 효과를 이용해서 시선을 한 번 잡아 끌고(코드팬에 누가 올려둔 코드를 배꼈다) 아래로 스크롤링 할 수 있음을 안내하는 화살표를 넣어 하단 스크롤을 유도했다. 저 화살표는 통통 튕기고 있어서 시선을 주목시키는 효과도 있지만, 클릭을 하면 스크롤을 스무스하게 내리는 기능성도 있다. ![스크린샷 2025-03-11 오전 12.32.51](https://hackmd.io/_uploads/B16ZUP6jJe.png) 모바일에서는 이렇게 보인다. 예쁨쓰.. 코드펜의 CSS 장인이시여... ![0311](https://hackmd.io/_uploads/SJYaHwaoJx.gif) 웹, 모바일 모두 처음 페이지에 진입했을 때는 전광판만 화면의 대부분을 차지하기 때문에, 깨알같이 콘텐트 영역에 사용 된 음원의 정보도 노출하고있다. 모바일 브라우저에서는 매끄럽게 표현되지 않은 부분이 많아서 수정해야한다. <br> ## 2.간격, 타이포, 메인 콘텐츠 디자인 조정 ![스크린샷 2025-03-11 오전 12.34.40](https://hackmd.io/_uploads/ryQKivTsyx.jpg) 도착한 콘텐트 메인 영역에서는 각 트랙 별 이미지 사이즈를 기존보다 키워서 더 풍성해보이는 앨범 느낌을 냈다. 세로로 긴 직사각형 형태로 카드의 모양을 바꾸고 앨범 커버와 카드 백그라운드 사이의 간격을 없애서 안정적이고 꽉 찬 느낌이 들도록 유도했다. <br> 처음 만들었던 페이지에서 플레이어 컨테이너에 야광 조명 효과를 줬던 느낌이 좋아서, 이번엔 버튼과 카드에도 넣었다. 다크 띰에서 채도와 명도가 높은 컬러를 메인 컬러로 잡으면 `linear-gradient` 효과의 가성비가 급격히 좋아지는 느낌이다. 뭔가 굉장히 멋부린 느낌을 내고싶었는데... 마음에 쏙 든다. 히히 ☺️ `transition` 옵션은 0.3초 정도가 가장 이쁘다. 더 빠르면 충분히 인지하기 전에 끝나고 더 느리면 답답하다. ## 폰트 명도대비 조절 ![스크린샷 2025-03-11 오후 4.58.46](https://hackmd.io/_uploads/SJoBpw6jJe.png) 폰트 명도도 한 번 조정했다. dim 상태의 카테고리 태그나 디스크립션 영역에 너무 어두운 회색을 썼더니 명도대비가 너무 낮아서 잘 보이지 않았다. 전에 만든 페이지도 이번에 만든 페이지도 메인 컬러는 스포티파이의 상징인 `#3be477` 텍스트는 화이트, 두개의 색상만 사용하고 나머지는 명도 조절만 했다. ## UX 개선 이전에 만든 페이지가 지닌 문제 중 하나는 **카드를 클릭했을 때 노래를 틀 수 있다는 사실을 사용자가 인지할 수 없다**였다. 그래서 마우스 오버 시 카드가 상단으로 하이라이트 되며 플레이 버튼 노출해서 클릭을 유도했다. (스포티파이에서 하지 말란 행동이었는데.. ㅎㅎ... 미안..) ![image](https://hackmd.io/_uploads/ByY-2Dpsye.png) 하지만 이것조차 사용자 관점에서는 카드에 마우스 오버 할 수 있다는 사실을 페이지에 도착했을 때 인지하지 못하므로 한 번 더 수정해야된다. 피씨는 마우스를 움직여대니 그나마 낫다. ~~모바일에서는 여전히 저 카드를 클릭하기 전까지는 음악을 들을 수 있다는 걸 인지할 수 없다. 아무래도 들어보기 같은 label을 어딘가에 붙여야할 것 같다.~~ 모바일은 카드 면적이 뷰포트의 전체 너비를 차지하는 방향으로 ui를 조정했더니 그나마 스크롤 시 플레이 유도 버튼이 뜨는 방식으로 개선됐다. [TouchEvent](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events) 덕분에 자연스럽게 플레이 버튼이 보인다. *FYI: touchstart → mouseover(`:hover`) 이벤트 발생* ![0311(3)](https://hackmd.io/_uploads/Sy3IGd6jkl.gif) 다만, 앨범커버가 가진 화려함 때문에 플레이 버튼이 시각적으로 강조되지 않으므로 또 손봐야할 것 같다. 배경과 커버 사이의 간격이 없는 것도 이미지 부각이 과하게 나타나서 UI의 균형성을 손보겠다고 시작한 원래의 목적을 상실한 느낌이라 썩 좋은 방법은 아니었다고 회고했다. <br> ## 플레이어 기존보다 조금 면적을 넓혔다. 플레이어 내에도 현재 재생 중인 트랙의 정보를 함께 노출했다. 플레이어 내부의 UI는 내가 컨트롤 할 수 있는 영역이 아닌데(iframe 으로 스포티파이를 통해 가져옴) 면적 자체를 키워도 내용 없이 휑한 느낌이 들어서 다른 모양의 플레이어로 바꿔야하나.. 같은 고민이 시작됐다. ![image](https://hackmd.io/_uploads/S1CO20Jnkg.png) <br> ## 푸터 추가 콘텐츠 하단에는 플레이어가 디스플레이 되며 어차피 차지할 공간이기도 하고.. 휑한 게 안 예뻐보여서 푸터도 만들었다. 이뿌당 😋 ![스크린샷 2025-03-11 오전 1.16.04](https://hackmd.io/_uploads/Byit7uaoJg.png) <br> # 기타 codepen에 external resource나 내가 만들어서 여러번 재활용할 수 있는 코드 스니펫을 설정하는 공간을 찾았다. 톱니바퀴 달린 settings 버튼 눌러 들어가면 된다. 나 참. 눈 뜬 봉사도 아니고. 이게 오늘의 TIL 인듯. ![image](https://hackmd.io/_uploads/BJ2fnC1nJl.png)