[토이프로젝트 개발일지 01] 구상, 메인 화면 만들기

이번 겨울 방학동안의 목표는,,,

진로 정하기 + 관련 이론 공부하기 + 간단한 프로젝트 완성해보기

였다!!

 

일단 웹쪽으로는 가고싶은데 아직 프론트/백 둘 중에서는 선택을 못했다... 하긴 배운 게 없으니까 당연함

그래서 일단 보이는 것부터 만들어야 하니까 프론트 관련 공부를 하던 중에, 저번까지 실습하던 체크리스트에서 결정타를 맞았다.

기껏 힘들게 투두리스트 코드 찾고 공부하며 완성했더니 새로고침하면 다시 다 날라가는 것이다...

이래서 백엔드도 공부해야되구나를 깨달았다.

 

그래서 그때 실습은 원래 프로젝트로 발전시킬 생각이었으나, 그냥 놔두고 새로 다시 구상하여 간단한 웹 사이트를 만들어보기로 했다! 이 과정에서 화면 구성하기 + 서버에 저장이란걸 해보기...를 할 예정이다.

 

---

01. 주제 선정, 목표

24.01.25(목)_10:36

일단 토이프로젝트를 진행하려고 결심한 건 좋은데, 뭘 만들지가 문제였다.

아무래도 처음이니까 이미 존재하는 사이트를 클론 코딩하는 것이 좋을까? 라는 생각도 들었으나... 솔직히 그건 별로 재미가 없었다. 역시 이런 걸 할 때 제일 중요한 포인트는 >일상 생활에서 내가 필요한 것인가< 인 것 같다.

사실 그래서 투두리스트를 만들려고 했었던 거지만... 

 

아무튼 그럼 또 내가 필요한 게 무엇이 있을까 고민하다가, 며칠 뒤 여행을 간다는 것이 떠올랐다.

이런 여행을 계획할 때는 막연히 어디 가고 싶다~ 무얼 해보고 싶다~만 떠오르고 정확히 어디에 무엇이 있는지 찾을려면 직접 검색을 해야한다. 또한 2박 3일등 코스 형식으로 찾고싶으면 다른 사람들의 여행 후기? 블로그 등을 읽는게 보통인 거 같다.

여기까지만 생각했을 땐... 아마 이런 코스 추천 하는 사이트들은 이미 있을 거 같긴 하다.

 

하지만!! 

나는 거기에다 플러스로 내가 갔던 여행들을 코스대로 정리해서 기록하고 싶었다. 나중에 누가 그곳으로 놀러간다 하면 그 글을 딱 보여주면 될 것이다.

여기까지 하면 또 그냥 개인 블로그에 적어라 라는 생각도 든다.

 

그러다가... 저 둘 기능을 합친 사이트가 있으면??...라는 생각이 들면서 바로 만들고 싶어졌다.

그런데 지금 생각하니까 그런 사이트도 찾으면 나올 거 같기는 한데... 아무튼 원하는 기능으로 만들어서 내가 이용한다는 게 중요하니까!! 그냥 만들기로 했다.

 

그리고 솔직히, 아직 뭐 아는 게 제대로 없어서 생각한 걸 완벽히 다 구현하기엔 무리일 거 같다. 당연함

일단 지금은 화면만 만드는게 우선 목표고, 나중에 더 공부해서 진짜 서버에 저장까지 할 수 있도록 발전시키고 싶다.

 

그래서 정한 이번 목표~!!

 

1. 메인 페이지 만들기

2. 로그인 페이지 만들기

3. 추가) 각 기능 페이지 만들기

 

입니다. 빠밤

사실 위에 길게 써놓았지만 실제로 주제선정까지 오랜 시간이 걸리지는 않았다. (일어나서 폰하다가 생각함) 뭐였지... 원래는 쇼핑몰 형식으로 만들려다가 여행 사이트로 정한거라, 만들 때도 쇼핑몰 코드를 참고하여 만들었다. 그렇다. 지금 이미 메인 페이지는 완성한 상태로 뒤늦게 일지를 시작했다.

 

 

 

---

02. 메인 페이지 구상

24.01.25(목)_12:03

목표를 정하고 아침 먹고와서 화면 구상을 일단 그림으로 그려봤다. 옛날에 학교에서 맨날 포스터 문구같은 거 만들라고 할 때마다 급하게 그럴싸한 문구를 떠올렸던 걸 생각해서 사이트 이름까지 만들었다. (나중에 다시 보면 바꾸고 싶을 수도 있겠지만 지금은 일단 맘에 들음,,, 일로하~~~)

 

 

위에 배너는 여러 여행 장소 배경으로 자동 슬라이드 형식으로 넘어가게 하고 싶다. 또한 아래에 각 탭들은 마우스 호버시 조금 커지게 하고 링크쪽으로 호버시 색이 변하게 하면 될 듯하다. 전체적인 페이지 구성으로 상단 탭, 아이템 목록은 일반 쇼핑몰을 참고하여 만들 것이다.

 

 

 

---

03. 상단 부분 만들기

24.01.25(목)_14:22

지옥이었다... 유튜브 보면서 따라서 실습할 때와는 완전 달랐다. 내가 구상한대로 만들려니까 필요한 기능들을 직접 서치하며 넣으니까 처음에는 글자들이 완전 지멋대로 꼬였다. 2시간 동안 상단 바 글자 위치 조정만 한듯(...)

 

Menu / ILOHA / Home Login My page 를 3구역으로 나누어서 각각 위치를 조정하려니까 난리가 났다. 처음에 오른쪽 글자부터 오른쪽 정렬하고, (여기까진 괜찮았음) 그리고 가운데 제목을 쓰려니까 진짜... 쟤가 커지면 오른쪽 애들이 밀려나고 (대체 왜??) 완전 난장판이었다.

...

-> 저때는 처음이라 몰랐지만 지금 메인화면 다 만들고 난 입장에서 보면... 내가 div로 구역을 제대로 안 나눴었다. 제목만 div 설정하고 나머지 애들은 그냥 a href에 id 설정하기, ul에 id 설정하기, 이렇게 했었다. (그러니까 안되지,,,)
심지어 ul 태그로 쓰니까 공간이 뭔가 다르게 할당되어서 더 그랬던 거 같다.
아무튼 지금보니까 그렇게 해도 된 게 신기한데 이제 화면을 줄이면 글자들이 조금 이상해지니까 나중에 모바일에서 보고 고쳐야겠다.

 

그리고 아직 배너를 어떻게 해야할지 모르겠어서 일단 저렇게까지 만들었었다.

저러고 칼국수 먹으러 떠나 버리다

 

 

 

---

04. 하단 목록 부분 만들기

24.01.27(토)_19:30

그저 그런 상단바라도 일단 만들었다는 게 신났던 건지 금요일 하루는 놀고 토요일 정신차리고 다시 이어서 만들었다.

솔직히 이 하단 부분이 제일 맘에 든다. 예쁘게 됨ㅎ.ㅎ

그림 구상

결과물

 

최대한... 내가 평소에 사이트를 들어갔을 때 되게 예쁘게 잘 만들었다는 디자인들을 떠올리며 만들었다. 그림에선 바깥 선으로 되어있었는데 막상 해보니 안 예뻐서 선 없이 그림자로 했다. 바꾸고 나니까 내가 원하던 게 저거였음을 깨달음

그림들은 이 사이트를 이용하였다. -> https://www.flaticon.com/kr/ 

 

 

이때부터는 div를 이용하여 제대로 구역을 나누고 그 안에서만 이미지와 글자가 들어가도록 잘 조정한 거 같다. (물론 나중에 더 공부하고 다시 보면 이상하게 짠 코드일수도)

<div id="tripList">
      <div class="tripCard1">
        <div class="imgContainer">
          <img class="tripImg" src="train.png">
          <div class="imgSource">
            Image Source<br> Freepik-Flaticon
          </div>
        </div>
        <div class="tripContents">
          <li><b>바쁜 일상 속에서</b></li>
          <li><b>잠깐의 휴식이 필요하다면</b></li>
        </div>
        <div class="tripLink">
          <a href="">☘️국내 여행 찾아보기</a>
        </div>
      </div>
      <!--(2, 3도 반복)-->
</div>

 

 

전체적으로는 tripList로 감싸서 flex모드로 display하였다. 이러면 자동으로 수평 정렬이 된다. 안하면 원래 div를 차례대로 썼던 것처럼 세로로 나열된다.

또한 justify-content: center를 써야 화면 가운데에 온다. 안하면 화면 왼쪽에 정렬된다.

#tripList{
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /*반응형, 줄이면 세로 정렬*/
  margin-bottom: 100px;
}

 

 

flex-wrap은 아직 잘 모르겠지만 해보니까 마치 반응형처럼 줄이면 자동 세로 정렬이 된다.

 

저거 안 넣으면 화면 줄였을 때 flex모드로 되어있어서 저 네모칸들이 같이 줄어든다... 빼빼로가 됨

 

---

 

그리고 목록이랑 이미지 각각에 마우스 커서를 올려 놓았을 때(hover) 크기가 살짝 커지는 효과를 주었다.

처음에는 transform을 몰라서 그냥 width랑 height을 각각 더 크게 조정하는 식으로 하였는데, 그렇게 하니까 양 옆 애들도 영향을 받아서 약간 화면에 지진이 난 듯한... 효과였다.

하지만 transform으로 scale을 조정하면 해당 칸만 커져서 예쁘게 전환된다.

.tripCard1:hover{
  transform: scale(1.1);
}
/* 2, 3도 반복*/

.tripImg{
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  width:50%;
  transition: transform 0.3s ease-in-out;
}
.tripImg:hover {
  transform: scale(1.1);
}

 

tripCard는 각각 색깔이 달라서 그냥 따로 만들었지만 이미지는 공통이어서 한번에 클래스로 설정하였다.

이때 원래 이미지 클래스에 transition으로 transform에 몇 초 명령을 추가하면, 해당 초동안 전환 효과가 길어진다. 그래서 카드는 그냥 빠르게 커지고 이미지는 살짝 느리게 커지도록 만들었다.

 

---

 

이미지를 추가하고 나니, 문제는 출처 표시를 해야한다는 점이었다. 찾아보니 푸터에 쓰거나 이미지 근처에 표시를 하라는데... 그래서 마우스를 이미지 가까이 올리면 출처가 나타나도록 만들었다.

원래는 이미지 자체에 호버시 글자가 뜨게 하고 싶었는데 잘 안된다... 그냥 이미지 바로 아래 공간에 된 듯

 

먼저 이미지와 출처 전체를 감싸는 imgContainer에 relative로 설정하고 hidden으로 해놓는다.

그리고 imgSource에서 absolute로 받으면서 위치 설정을 하고 마찬가지로 hover시 불투명도가 1로 되어 나타나는 것을 transition으로 조금 천천히 뜨게 한다. 

.imgContainer{
  position: relative;
  overflow: hidden;
}
.imgSource{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.294);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.imgSource:hover{
  opacity: 1;
}

 

---

 

이번엔 이미지 아래 쪽 간단 설명 문구와 링크를 꾸며준다. 사실 html에서 li로만 쓰고... ul같은 것도 같이 써야되는데 그럼 공간이 이상하게 돼서 뺐다. 근데 그럴거면 li말고 span이라던가 그냥 다른 걸로 쓰는 게 더 나을듯 하다.

아무튼 여기서도 링크쪽에 hover하면 백그라운드 전체 색이 바뀌도록 하며 cursor도 pointer처럼 바뀌게 한다. 

.tripContents li{
  list-style-type: none;
  padding: 4px;
  text-align: center;
  color: white;
  font-size: 18px;
  font-family: 'Nanum Gothic', sans-serif;
}
.tripLink{
  font-size: 18px;
  text-align: center;
  margin: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: white;
  border: 2px solid white;
  border-radius: 8px;
}
.tripLink:hover{
  background-color: rgb(250, 226, 255);
  border: 2px solid rgb(250, 226, 255);
  cursor: pointer;
}
.tripLink a{
  text-decoration: none;
  font-family: 'Nanum Gothic', sans-serif;
}

 

---

 

추가로 알게 된 것은 폰트 설정이다.

https://fonts.google.com/

Browse Fonts - Google Fonts

 

위 사이트에서 폰트를 선택한 다음 오른쪽에 select 어쩌구 플러스 버튼을 누르면 맨 오른쪽처럼 화면이 뜬다. 안 뜨면 새로고침하고 다시 하면 된다. 그리고 나온 link의 윗부분은 head 태그 안에, 아래부분은 쓸 css 선택자안에 붙여넣기 하면 된다. 그런데 여러개 하니까 font-family가 중복되는 경우가 있던데 그건 못 쓰는 거 같다...

 

<head>
    <title>ILOHA</title>
    <meta charset="utf-8">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@700&family=Orbit&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@700&family=Nanum+Gothic&family=Orbit&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="style.css">
</head>

 

 

 

---

05. 자동 전환 배너 만들기

 

24.01.27(토)_22:46

드디어... 메인 화면에 마지막 보스... 등장

이거 하는 데 시간 다 쓴 거 같다.

아니 원래는 자동 슬라이드 ㅠ를 만들고 싶어서 찾아보면서 했는데 슬라이드 형식은 잘 안 되었다... 그래서 페이드 형식으로 나와있는 걸로 하였다.

 

 

일단 이걸 하기 위해서는 먼저 html로 div를 정해주었다. 이미지와 문구 전체를 감쌀 slideBannerContainer, 이미지들을 감쌀 slideBox, 각 이미지들을 감싸는 slide와 fade, 문구는 slideContents로 하였다.

<div class="slideBannerContainer">
      <div class="slideBox">
        <div class="slide fade">
          <img src="https://images.unsplash.com/..." class="slideImg">
        </div>
        <div class="slide fade">
          <img src="https://images.unsplash.com/..." class="slideImg">
        </div>
        <!--이미지 넣고 싶은 만큼 반복-->
      </div>
      <div class="slideContents1">
        <h2>여행이 필요할 때는 언제나</h2>
        <h1><span class="title_I">I</span><span class="title_LO">LO</span>
        <span class="title_HA">HA</span>-<span class="title_I">일</span>상에 새
        <span class="title_LO">로</span>움을 더<span class="title_HA">하</span>다</h1>
      </div>
</div><br>

 

문구는 각각 span class로 색깔 따로 설정하였음

그리고 css...

.slideBannerContainer {
  position: relative;
  width: 100%;
  height: 350px;
}
.slideBox {
  margin:0px;
  padding:0px;
}
.slide {
  min-width: 100%;
  height: 350px;
}
.slideImg {
  width: 100%;
  height: 100%;
  opacity: 0.9;
  object-fit: cover;
  object-position: center 45%;
}
.fade {
  animation-name: fade;
  animation-duration: 1.0s;
}
@keyframes fade {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}
.slideContents{
  position: absolute; /*배너 내 위치하도록 조정*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* 글자 색상 설정 */
  font-size: 20px;
  text-shadow: 1px 1px black;
  font-family: 'Orbit', sans-serif;
  text-align: center;
  z-index: 1; /* 다른 요소 위에 표시되도록 설정 */
}

 

솔직히 진짜 여기있는 거 혼자 쓰라고 하면 못할거 같다. 아직은 계속 찾아보면서 하는 중...

 

 

그리고 여기까지 하면 그냥 정적 이미지로서 안 바뀐다.

자바스크립트로 동적 이미지가 되도록 해야 한다.

let currentSlideIndex = 0; //전역변수로 호출할 때마다 업데이트
showSlides(); //페이지 로드 시 호출

function showSlides() {
  let slides = document.querySelectorAll('.slide');

  if (slides.length === 0) {
    console.error("슬라이드를 찾을 수 없습니다.");
    return;
  }
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none';
   
  }
  if (currentSlideIndex >= slides.length) {
    currentSlideIndex = 0;
  }

  slides[currentSlideIndex].style.display = 'block';
  currentSlideIndex++;
  setTimeout(showSlides, 4000);
}

 

일단 처음에 현재 배너 이미지 인덱스를 전역 변수로 만들어야 한다. 지역 변수로 하면 저장이 안되니까 의미가 없다.

또한 이 배너는 버튼 클릭과 같은 특정 이벤트 발생에서만 동작하는 게 아니므로 바로 showSlides로 호출한다.

 

그다음 '.slide' 클래스를 불러와서 slides에 저장한다음 (자동 배열) for문으로 반복하면서 전부 일단 none으로 안 보이게 한다. 그리고 나서 if문으로 마지막 배너인지 검사한다. 마지막 배너면, 무한 반복해야하니까 현재 인덱스를 0으로 하여 다시 처음부터 시작하도록 맞춘다.

 

그리고 slides 배열의 해당 인덱스 칸의 display를 block으로 함으로써 보이게 한다. 후에 인덱스를 증가시키고 setTimeout으로 몇 초마다 바뀔 것인지 정한다. 4000이면 4초이다.

 

 

 

---

06. 메인 화면 결과

 

일단 여기까지 만든 결과~!!

구상과

결과물

 

 

 

 

여기까지 한 고찰,,,
div를 잘 나누자...
효과가 많으니 최대한 검색해서 찾아보자...
사진을 해당 구역 칸에 딱 들어맞게 넣고 싶을 때는 cover를 이용하자...
서로 연관짓게 하고 싶으면 position: relative와 absolute를 쓰자...

근데 정말 먼저 그림으로 그리고 하니까 진짜 더 만들 의욕도 생기고 상상했던 게 되니까 신기하다 ㅎ.ㅎ
아무튼 메인화면은 대강 완성~!!

이제 메뉴바를 누르면 옆에서 창이 튀어 나오는(?) 거랑 로그인 페이지 구현해보고 싶다!! + 페이드 말고 진짜 슬라이드 배너도,,,

끝~.~