자유 실습 - 내가 만들고 싶은 단일 페이지 사이트 만들기

 

실습 개요

이번엔 따라 치는 실습이 아닙니다. 평소에 만들어 보고 싶었던 사이트를 직접 기획하고, 그동안 배운 박스 모델·flex 영역 분할·시맨틱 구조를 적용해 한 페이지로 완성하는 것이 목표입니다.

• 예제를 따라 칠 때는 쉬워 보여도, 빈 화면에서 직접 짜 보면 약한 부분이 분명히 드러납니다. 바로 그 지점에서 실력이 늡니다.
• 화려함보다 완성을 우선하세요. 한 화면을 끝까지 다듬는 편이 여러 페이지를 절반씩 만들다 마는 것보다 훨씬 많이 남습니다.

---

실습 조건

• HTML · CSS만 사용 - JavaScript는 아직 배우지 않았으므로, 클릭 동작 같은 기능이 필요 없는 형태로 만듭니다.(이미 알고계신분들은 사용하셔도 됩니다.)
• js없이 만들때는 정보를 보여주는(읽는) 사이트가 적합합니다. (소개형 · 안내형 · 목록형)

 

---

내가 평소 만들고 싶었던 사이트는 https://stdict.korean.go.kr/main/main.do

국립국어원 표준국어대사전

이다. 

 평소 잘 이용하고는 하지만, 다지인이 조금 아쉽고 평면적이었다.

어차피 내가 모든 기능을 다 만들어야하는 것도 아니고 , 한장짜리  멈춰있는 단일 페이지를 만드는 것이기 때문에

대문만 그럴듯하게 만들면 될 것같아서. 최대한 단순하면서도, 기본 틀은 다 맞춰있는,

세련됐다고 할 수는 없지만, ux부분에서 크게 하자가 없는 이 사이트를 기본으로 정했다.

 

아마 다른 친구들은 날고 기겠지...진짜 반응형 홈페이지를 만들고 난리나겠지 뭐..

벗...

나의 목표는 오로지 나다..!! 

다른 달팽이들 신경쓰지 말아야지. 

 

F12 로 살짝본 코드

 

 

국립국어원 표준국어대사전 사이트의 구조를 벤치마킹하여, 자개(Mother-of-pearl) 컨셉의 단일 페이지 웹사이트를 구현하기 위한 가이드를 정리해보았다.

 

 

 

1. 시맨틱 구조 설계 (HTML)

박스 모델을 활용하여 화면을 논리적으로 분할

• <header>: 제목 및 로고 (자개 질감의 로고 이미지 혹은 텍스트)
• <nav>: 검색 메뉴 레이아웃 (검색창과 메뉴바 형태)
• <main>: 핵심 콘텐츠 (단어 검색 결과 예시 등)
• <section>: 추가 정보 또는 목록 (가독성을 위한 카드형 레이아웃)
• <footer>: 저작권 및 안내 사항

2. 디자인 및 레이아웃 (CSS)

자개 느낌과 한국적 미를 살리기 위한 주요 스타일링 포인트입

• 배경 및 색상:
  • background-color: #000000; (검은색 바탕) - > 너무 어두우면 텍스쳐가 있는 이미지를 바탕에 깔아볼까한다.
  • 자개 느낌은 linear-gradient와 background-clip: text를 활용한 텍스트 효과로 구현 가능하다고 제미니가...
• Flexbox 활용:
  • display: flex;를 사용하여 내비게이션 바와 콘텐츠 영역을 정렬
  • justify-content: space-between; 등으로  탁트인 레이아웃
• 박스 모델:
  • padding, margin, border를 활용해 요소 간의 적절한 여백을 확보하여 가독성을 높이자

 

1차

1차로 만들어본 기본 뼈대.

여기서 하나씩 수정을 해볼것인데,

맨 먼저 오른쪽 상단에 있는 들어가기 | 회원가입 | 일러두기 색을 변경하고 싶었다.

 

선생님이 말씀하신대로 제미나이에게 코드 전체를 맡기지 않고

'특정부분을 수정하고 싶은데, 어디가서 어떻게 수정하면 되는지'를 물어보고,

알려주면 내가 스스로 조금씩 고치면서 공부를 해나갔다.

참고사항을 친절하게 알려준 덕분에 주요 팁들도 놓치지 않을 수 있었다.

• 색상 코드: #333 대신 원하는 색상의 16진수 코드(예: #4a4a4a, #0056b3)를 입력하면된다.
• 위치: style2.css 파일 안이라면 어디든 괜찮지만, 가독성을 위해 기존의 .user-menu 스타일 근처에 배치하는 것이 좋다.

2차 수정

 

 

 

이쯤에서 또 제미니한테 어떻게 하면 좋을지 물어봤다.

친절히 알려주고 있지만 레고 조각들을 일부 건내는 것과 같아서,

아예 전체적인 지도가 머리 속에서 잘 그려지지 않는 나에게는 , 이미 작성된 코드 어느부분에 추가 코드를 넣어야 하는지도 어려웠다.

영아가 너무 어릴때는 블록쌓기 놀이 조차도 보호자가 순서를 생각해서 하나씩 건내주는 것이 좋다.

그래야 결과물이 나오고, 애가 울지 않는다.

나도 안울고 싶어서 제미니한테 많이 물어봤다. 

 

/* 1. 공통/초기화 (Reset): 전체 페이지에 영향을 주는 스타일 */
body { ... }
/* 2. 레이아웃 (Layout): 크게 크게 구획을 나누는 스타일 */
header, main, footer { ... }
/* 3. 섹션별 상세 스타일 (Component): 헤더 내부, 알립니다 섹션 내부 */

/* 3-1. Header 상세 */
.top-util { ... }
.main-header{ ... }
.search-wrap { ... }

/* 3-2. Main 상세 */
.notice-section { ... }
.notice-header { ... }
.notice-list { ... }

/* 3-3. Footer 상세 */
footer { ... }

이렇게 큰 틀로 이해시켜줬다.  고맙소....

 

3차 수정.. 기괴하다...백룸같다...

 

 

계속 수정을 해도 바뀌지 않는다면, 연결이 잘 안되어있을 가능성이 있다.

연결이 처음에는 되었다가 끊긴거라면, 

더블체크를 하지않고, 코드를 모두 ai에게 짜달라고 요구하고 복붙을 했을 경우가 있다.

피드백을 받고, 그 수정안을 또 ai한테 보여주면서 멋대로 바꾸지 못하도록 해야하고, 오타도 같이 수정해 나가야 한다는 것을 배웠다. 

내가 최종적으로 완성한 화면이다. 

원래는 이 그림을 뒤에 배경처럼 깔고싶은데, 표준국어대사전 로고를 캡쳐로 만든 상태라 이질적인 화면이 되어버린다.

효과적으로 사용하지 못해 아쉽다.