오늘은 처음으로 맞이하는 위기와 혼란 속에서 팀원들과 더욱 가까워지는 계기가 되었다...
우선 어제 시작한 첫 팀프로젝트인 팀원 소개 페이지 만들기에 들어갈 본인의 프로필을 자신만의 스타일대로 오늘 오전까지 만들기로 했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INFO</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,500;0,600;0,800;0,900;1,200;1,400;1,500;1,600;1,800;1,900&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet">
</head>
<body>
<div class="frame">
<div class="profile-section">
<img id="profile-picture" src="yunseo.jpg">
<div class="introduction">
<h2>Name</h2>
<p>김윤서</p>
<h2>ABOUT ME</h2>
<p>"백엔드 개발자가 되기 위한 첫 걸음"<br>정보통신공학 출신으로 관련 전공이지만 아직 모르는게 많아 캠프에 참여하게 됐습니다.<br>캠프 기간동안 서로 협력해서 보람있는 시간
보내요! </p>
<h2>MBTI</h2>
<p>ESTP</p>
<h2>My Hobby</h2>
<p id="hobby">카페가기<br>콘서트 보러가기<br>강아지랑 산책하기</p>
</div>
</div>
<h5 class="value-menu">MY FAVORITE</h5>
<div class="value-section">
<div class="value">
<a href="https://youtu.be/JleoAppaxi0?si=VlfuvzkjZN-vyE_S">
<img class="value-icon" src="music.png"></a>
<div class="value-intro">
<h3 class="value-name">Music</h3>
<p class="value-exp">아이유-Love wins all<br>(Click on the icon)</p>
</div>
</div>
<div class="value">
<img class="value-icon" src="food.png">
<div class="value-intro">
<h3 class="value-name">Food</h3>
<p class="value-exp">떡볶이<br>마라탕<br>토스트</p>
</div>
</div>
<div class="value">
<img class="value-icon" src="dog.png">
<div class="value-intro">
<h3 class="value-name">Animal</h3>
<p class="value-exp">강아지</p>
</div>
</div>
</div>
<footer class="footer">
<h3 class="contact">CONTACT ME</h3>
<div class="links">
<a class="blog" href="https://velog.io/@yunseokim119/posts">BLOG</a>
</div>
</footer>
</div>
</body>
</html>위는 내가 만든 프로필 페이지 코드이다.
되게 기본중에 기본으로만 만든 페이지지만 3~4년전에 배웠던 html과 css의 기억을 꺼내서 만드려고 하니 이것도 만만치않은 작업이였던 것 같다.(갈 길이 멀ㄷㅏ...)
오늘 오전, 팀원들과 각자 만들어온 프로필을 공유하며 우리가 원하는 스타일에 가장 적합한 디자인의 프로필을 선정하여 그에 맞춰 각자 작성한 프로필 내용을 꾸며봤다. 여기까지는 너무나도 수월하게 진행되었고 예상보다 빠른 진도에 흡족하며 CSS 꾸미기에 몰두하고 있었다.
우리의 최종 결과물은 유튜브 채널창을 모티브로 채널 배너에는 팀 이름을 넣고 채널 프로필과 소개란은 팀원 캐릭터 사진과 팀 소개글로 꾸며 기존 유튜브에서는 썸네일을 누르면 동영상이 연결되는 부분을 썸네일을 누르면 각자의 프로필 창이 열리는 구성이다.
여기서 프로필이 열리는 부분을 간단한 방식으로 새 창으로 넘어가게끔 하이퍼링크를 주려 했지만, 프로젝트를 하다보니 팀원들과 작업물에 대한 욕심이 생겨 하이퍼링크 대신 팝업창처럼 프로필이 열렸다가 닫기를 누르면 다시 유튜브 채널 페이지로 돌아가게끔 만들어보기로 했다.
문제는 여기서 시작된다.
웹사이트 제작에 아직 많이 서툰 우리는 단순히 '팝업창 띄우기'로만 생각했던 부분이 찾아보니 모달이라는 처음 듣는 기술을 통해 만들어야됐다.
여기서 1차적으로 멘붕이 왔지만 팀원 중 웹사이트 제작 경험이 있던 팀원이 모달창을 만들어보기로 했고, 결과적으로 성공을 한 줄 알았지만 html에서 다른 html파일을 여는데 있어서 오류가 나며 모달창을 만든 팀원의 컴퓨터 서버를 통해서만 정상 작동이 가능하고 파일로 배포받은 나 포함 다른 팀원들 컴퓨터에선 썸네일을 눌러도 모달창이 열리지않는 문제점을 마주하게 됐다. 이를 해결하기 위해 ChatGPT의 도움도 받아보고 코드 오류를 잡아준다는 코딩 전용 AI도 이용해봤지만 패치 API 어쩌구...하는 지금 우리의 수준으로썬 당장 큰 도움이 될 해결책이 아닌 복잡한 내용들만 얻게 되어 일단 오늘은 여기서 마무리 하는게 좋겠다는 결론을 짓게 됐다.
그래도..!코드의 오류라면 모달창을 만든 팀원의 컴퓨터에서도 작동이 안됐을텐데 거기선 작동이 문제없이 잘되는거 보면 우리 꽤...잘하고 있는거 아닌가?아직 2일차밖에 안됐는데 앞으로 남은 기간동안 얼마나 더 성장하게될지 기대가 되는데 이거 완전 럭키비키잖아~~...원영적사고로 찝찝한 마음을 달래보기로 했다. 나머지는 내일의 우리한테 맡겨보자!
