우아한삽질 06. 업버튼과 함께라면 스크롤은 무섭지 않아 !

우아한삽질 2026-07-22 13:22 조회 60 수정됨

안녕하세요 추후에 오픈하게 될 머블로.KR의 운영자 우아한 삽질입니다 !!


지난 글에서는 홈페이지 하단의 허전한 공간에 써드배너를 만들어 넣었는데요


[ 단 3 번 ] 홈페이지에 자연스럽게 스며드는 배너가 완성됐습니다 !! ( 자랑 할려고 강조한 거 아님 암튼 아님 )


스크린샷 2026-07-22 112213.png

어때요 ? 참, 쉽죠 ?
라고 하기엔 전번의 배너들과 실수들을 생각하면 조금 부끄러워지긴 하네요..

d0f15fb207ccf5bc7912a2023e7dc030.jpg

그래도 그 과정을 거치면서 알게 모르게 실력이 쌓여가긴 한 것 같습니다
처음에는 어떻게 채워나가야 할지 막막 해서 일단 시작했는데
하나가 생기니 그 다음에 할 것들이 보이는 느낌이 들고
여러개를 채워 넣다 보니 부족했던게 보이고 그러더라구요 !
이제 고작 메인화면 끝나 가는데 너무 장황했을까요?!

쨋든 ! 잡설은 이쯤하고 써드배너를 보며 뭘 더 추가할까 고민해 봤어요
근데 홈페이지 메인에 뭐가 많아지면 오히려 커뮤니티형인 저희 사이트에는
마이너스가 될 거 같다 라는 생각이 들어서 기능적인 행 하나정도만 넣고 행 작업은 마무리 하기로 했습니다 !
어떤걸 만들까 하다가 스크롤을 내렷다 올렷다 내렷다.. 올렷다..
음?

8911c4b725ea602fc9cb85b27cce03c0.jpg

이거 생각보다 귀찮은거 아니겠습니까 ?!
옳다쿠나 이거다 ! 싶어서 업버튼을 하나 만들어 보기로 했습니다 !
일단 행 추가 프로선수 답게 관리자로 들어가서 HTML 행을 추가했습니다 !
그 후 마이 파트너 GPT에게 프롬포트를 입력했어요 !
스크린샷 2026-07-22 130439.png

오 저번하고 똑같이 거의 만족스럽게 나왔어요 !
이미지를 주는 것 보다 텍스트로 정확하게 명령하는게 훨신 잘 나와주는 것 같습니다 
일단 첫 수은 빛이 흐르는 효과를 빼줬어요 ! 

스크린샷 2026-07-22 131039.png

흠... 빛이 없어지긴 했지만 색이 그라데이션으로 추가되었네요
하지만 저는 별로인 것 같아서 빛을 아예 없애달라 했습니다 !

스크린샷 2026-07-22 131334.png

GPT님 !!!! 굿 !!! 만족입니다 !!!
버튼 자체에는 어느정도 포인트는 있게 하고 싶었는데 다행히 잘 반영되었네요 !
전체 페이지하고도 잘 이루어지고 업버튼까지 두니 메인화면의 행은 이렇게 마무리 해야겠어요
이제 게시판 스킨을 만들어 좀 더 꾸민다거나 다른 행들의 스킨을 제작한다던가
그런 과정은 있겠지만 전체적인 틀 작업을 끝났네요
다음편부터는 아마 스킨을 작업하는 글을 올리지 않을까 싶어요 !!
그럼 이만 틀이 완성된 메인페이지 캡쳐를 보여드리며 오늘 글을 마무리 하겠습니다 !

screencapture-mublo-kr-2026-07-22-13_17_27.png

( 다크모드도 !!!ㅎ )

screencapture-mublo-kr-2026-07-22-13_22_06.png
글쓰기

댓글 0

등록된 댓글이 없습니다.