2024-04-09 와이어프레임 초안

1차 구상 (하고 싶은 거)

• 브라우저 창 같은 UI 프레임 (높이 고정으로 내용물만 바꾸기 or 세로 스크롤)
• 안쪽 내용물은 그리드? masonry? 차곡차곡 블럭 쌓기
• '딸깍' 느낌 나는 버튼? (뒤쪽으로 그림자지게, 누르면 그림자 가리듯이 위치 이동)
• 버튼 클릭 시 해당 내용 담은 새 창 뜨기 (모달 창처럼) or 창 내용 슬라이드
• 새 창으로 한다면 드래그할 수 있도록 (리사이즈는 어려우려나)
• 반응형으로, 가로 사이즈 줄어들면 차곡차곡 블럭 조립 바뀌도록
• 마우스를 따라다니는 동그라미 (색 반전 효과)

 

✅ 사용 툴:  WireframeCC https://wireframe.cc

Wireframe.cc | The go-to wireframing tool.

 

 

1차 시안 (https://wireframe.cc/v5EheW)

1페이지 (인트로)

인트로 화면은 윈도우 로그인 화면처럼. 버튼 누르면 들어갈 수 있도록 하거나, 이벤트로 자동으로.

로그인 화면 사라지며 메인으로 이동되면 좋을 거 같다.

 

2페이지(메인)

사진 꽉 차게 했다가 > 좌측으로 작아지고 블럭 하나씩 생기는 걸로.

블럭은 누르면 열리는 방식이면 재밌을 거 같다. 각각 사진을 넣고 고딕 액자 모양이어도 괜찮을 거 같고.

메인에는 정보 없이 이동하는 용도로 쓰는 게 나을지도 모르겠다.

 

3페이지(정보)

나에 대한 정보. 복권 긁듯이 하나씩 열리게 하거나(모두 열기 버튼 필요)

메인과 통일성 있게 액자 모양이거나?

 

4페이지(포트폴리오)

갤러리 형식? 리스트 형식? 아직 고민중. 클릭하면 새 창이 뜨거나 화면 꽉 차도록. (닫기 버튼 필요)

책/책장 모양 CSS 템플릿을 발견했는데, 활용할 수 있으려나 고민중.

 

 

갈 길이 멀다...