🚨 미니프로젝트 : 아, 저장안했다 (진행편)

✅ 주요 이슈 및 과정

1. HTML & CSS를 이용한 디자인 구현 (퍼블리싱)
2. jQuery를 이용한 레이어 팝업창 구현
3. 이미지 로딩 속도 개선을 위한 webp이미지 설정
4. FireBase를 이용해 데이터 연결
5. 유지보수와 확장성을 고려한 코드 변경
6. 발생한 에러 해결
7. 데이터 연결 후 HTML 구조 및 CSS 변경
8. 반응형웹으로 미디어쿼리 추가
9. google의 pagespeed를 통한 웹페이지 속도 측정
10. index 내 FireBase Key 별도 Js로 이동
11. 기능 테스트 및 전반적인 검수
12. 발표자료 작성

---

🤔 고민은 생겨도 어렵진 않았던 프론트 파트!

퍼블리싱은 가장 좋아하던 일이었기에 작업하면서 어려운 점은 없었고 정말 많이 즐거웠다. 백엔드 작업 후 돌아온 HTML의 코드가 구조상 안맞게 변경되어있을 때에도 내가 할 수 있는 부분이 생겼다는 점과 문제를 풀어나간다는 점에 굉장히 기뻐하고 있었다.

시간이 남으면 미디어쿼리를 사용해 반응형웹으로 작업해보려했는데 다행히 시간이 넉넉하게 남았다. 시간과 효율 대비 태블릿을 당장 맞추진 않아도 될 것 같다는 생각에 PC와 모바일을 중점으로 작업했다.

작업할 때에는 png, svg, webp 모두 준비해놓았다. png를 사용했을 땐 이미지 로딩 속도가 확연히 느렸다. 고민없이 webp로 모두 변경했다. 이 부분에 대해서는 원래 알고 있던 부분이었지만, 미니 프로젝트인데 과할까 싶었지만, 결과적으로는 정말 잘 결정한 것 같다.

Google의 점유율이 높은 만큼, 구글을 기준으로 작업하는 것이 가장 Best라고 생각하기에 Google에서 만든 웹페이지 속도 측정 사이트인 pagespeed를 애용하는 편이다. 사용자가 많아질수록, 데이터가 많이 쌓일수록 반드시 챙겨야하는 부분이고, 우리 팀의 작업물은 확장성과 유지보수를 중점으로 두고 작업하기로 했기에 폴더구조, 이미지 파일, 검색엔진최적화, 접근성, 성능, 권장사항을 가능한 모두 챙기려고 했다.

그 결과, 이렇게 높은 점수를 받아내어 좋은 웹페이지로 구현할 수 있었다.

트리맵을 보면 정말 빠르게 출력되는 것을 확인할 수 있다.
아직 해결하지 않은 접근성 부분에서 문제가 되고 있는 부분은 일부러 흐리게 만든 버튼 때문이기에 이 점수는 아직 그대로 갈 것 같다.

검색엔진최적화에서도 점수가 조금 떨어졌는데 이 부분은 아직 크롤러가 읽어갈 meta태그를 작성하지 않았기 때문이다. 어느 방향성으로 쭉 빠져나갈지 정하지 못했기에 이 부분을 작성하지 못했다. 방향성이 정해지면 meta태그를 작성해서 해당 부분도 100점으로 올려볼 생각이다.

---

🥹 유지보수하기 좋은 jQuery로 개선 완료!

레이어팝업을 띄우는 작업이 필요했는데 이전에 내가 만들어왔던 코드는 보통 레이어를 하나 띄우거나, 여러개를 띄워도 유지보수를 고민하지 않은 코드들이었다. 며칠쓰고 금방 삭제 예정인 레이어들이었기 때문에 리소스를 최대한 적게 들였던 것이었다.

// 처음 작성한 코드

// 멤버 1 레이어
document.getElementById('btn_layer').addEventListener('click', function() {
	document.getElementById('layer_wrap01').style.display = 'block';});

document.getElementById('close_btn').addEventListener('click', function() {
	document.getElementById('layer_wrap01').style.display = 'none';});

// 멤버 2 레이어
document.getElementById('btn_layer').addEventListener('click', function() {
	document.getElementById('layer_wrap02').style.display = 'block';});

document.getElementById('close_btn').addEventListener('click', function() {
	document.getElementById('layer_wrap02').style.display = 'none';});

그래서 처음엔 마찬가지로 각각의 태그에 id를 주어 하나씩 호출하는 비효율적인 Javascript를 작성했었다. 조금 고민해보니 우리 팀의 취지와 다른 Javascript 코드라고 생각이 들었다.

확장성과 유지보수를 중점으로 두고 작업해야했기에 이렇게 같이 작업하면 안됐다.
그런데 나는 이전과 같이 짜는 방법밖엔 모르던 사람이었다.
그래서 Javascript보다 더 쉽게 작성할 jQuery에 대해 방법을 찾고 잠깐의 복습을 진행했다.

// 수정한 두번째 코드 

$(function () {
        // 레이어 display none
        $(".layer_bg, .layer_wrap").hide();
  
        //레이어팝업 open 상태 function 생성
        function layer_open(no){
            $(".layer_wrap[layer="+no+"]").fadeIn();
            $(".layer_bg").fadeIn();
            layer_position();
            //레이어 영역 외 바탕화면 클릭시 화면 닫기
            $(".layer_bg").click(function (e) {
                if(!$(".layer_wrap").has(e.target).length){
                    layer_close();
                };
            });
        };
  
        //레이어팝업 close 상태 function 생성
        function layer_close(){
            $(".layer_wrap, .layer_bg").fadeOut();
        };
  
        //링크 클릭시 해당 레이어팝업 호출
        $(".btn_layer").click(function () {
            var no = $(this).attr("layer");
            layer_open(no);
        });
  
        //닫기 버튼 클릭시 레이어 닫기
        $(".close_btn").click(function () {
            layer_close();
        });
    })

그렇게 노력한 후에서야 이렇게 효율적인 코드를 만들어낼 수 있었다. 시간은 1시간 30분 ~ 2시간 정도 소요된 것으로 기억된다.

---

🚨 우리들의 작은 규칙 첫번째

메인을 깔끔하게 사용하기 위해 브랜치 사용 필수

🦊 처음 활용해본 Git, 처음일수록 확실하게!

Git을 정말 많이 사용해보고 싶었는데 첫 프로젝트부터 활용해볼 수 있었다.
터미널을 이용해보기도 하고, 인텔리제이에서 제공하는 편한 방법도 이용해보았다.

브랜치를 만들어 커밋, 푸쉬도 해보면서 조금은 성장한 내가 되지 않았나 싶었다.

(핑크색 동그라미가 내 계정이다 😂)

커밋에도 규칙이 있듯이, 브랜치에도 규칙이 있을까 싶어 알아보니 정말 있었다.

기본 브랜치 네이밍 규칙

1. 소문자 사용: 브랜치 이름은 항상 소문자로 작성한다.
2. 하이픈(-) 사용: 단어 사이는 하이픈으로 구분한다.
3. 간결성: 브랜치 이름은 간결하면서도 의미를 명확히 전달해야 한다.
4. 영문 사용: 가능한 영어로 작성하여 국제적인 협업에 대비한다.
   
   예시: feature-user-authentication

이외의 추가적으로 알고 있어야할 규칙은 위의 링크를 참고하면 좋다.
프로젝트를 진행하며 최대한 브랜치 규칙과 커밋 규칙에 대해 습관을 들일 수 있는 시간이 되기를 바라는 마음으로 꼼꼼히 살펴 읽어가며 사용을 해보았다.

---

💡 작업하면서 힘이 되주었던 팀원들의 열정과 반응!

다른 팀은 어떻게 작업하고 어떤 일들이 일어났는지 잘 모르지만, 우선 우리팀에 대해서만 이야기해보려고 한다. 우리 팀에는 경험이 있는 팀원 2명과 처음 경험해보는 팀원 2명이 있었다. 그래서 더욱 힘내서 작업하고자 했었다.

정말 다행이라고 생각이 들었던 것은 경험이 있는 팀원이 나 포함 채영님이었는데 난 프론트쪽에 속하는 웹퍼블리싱 경험자였고, 채영님은 백엔드의 경험이 있는 분이셨다. 아주 적절한 조합이라고 생각이 들었다.

오늘 읽어보게 되었지만, 정말 감동을 많이 받았다.
작업하면서도 슬랙으로 팀원 모두가 좋다고 최고라고 예쁘다고 기뻐해주었는데 이렇게 글로도 남겨줄줄 몰랐다. 그래서 슬쩍 캡쳐해왔다.

백엔드의 고충 에 대해서도 자세하게 서술하고 싶었지만, 나또한 이해가 80%는 되고 20%는 안된 부분들이 많았기에 자세하게 서술하기 어려워서 이번 프로젝트의 백엔드 관련된 자세한 리뷰를 확인하고자 한다면, 첨부한 링크를 확인해보시는 것을 권장한다.

반응형웹으로도 만들어나가는 것은 내 개인적인 욕심이었는데 모두를 기쁘게 해줄 수 있어서 더 뿌듯하고 보람찬 시간이었던 것 같다.

---

⏰ 개인시간을 투자해도 행복했다! (웹개발 기초 피드백)

우리 팀에는 처음 경험해보는 팀원이 2명 있었다. 유진님과 팀장님이었는데 열정이 남다르다고 느꼈다. 개인적으로 회사에서 근무할 때 느끼고 '아, 내가 이런 사람을 좋아하는구나' 라고 생각한 적이 있는데 그런 사람들이 어떤 사람이냐면 '배우고자 하는 사람' 과 '알고자 열정을 보이는 사람' 이다. 함께 떠오른 자매품으로 '질문을 하고서 제대로 듣지 않는 사람' 을 안좋아한다.

우선, 우리 조에는 배우고자 하는 마음과 알고자 하는 열망이 가득한 사람들만 있었다. HTML, CSS에 대한 피드백은 어렵지 않았다. 내가 알고 있는 지식 선에서 공유하면 되었기에.

다만, 나는 타인의 열망을 마주하고나면 뭐라도 더 알려주고 싶어하는 오지랖이 발동한다.
내가 좋아하는 것을 좋아하고 있는 사람들이 아닌가! 잔뜩 알려드리고 싶었지만, 시간의 제약도 있고 우리는 백엔드 트랙을 배우고 있는 사람이기에 [웹개발 종합반]에서 알려주지 않았지만, 알고 있다면 좋은 팁이나 기초 지식에 대해 공유해드렸다.

내가 현업에 있으며 꿀팁으로 생각하고 있던 정보 몇가지도 풀어보았다.
내 페이지를 정량화된 데이터로 수치화하는 방법과 페이지 속도를 개선하는 방법 등 공유하고 나니 정말 뿌듯하고 행복했다. 아마, 이 날도 행복지수가 꽤 높지 않았나 싶다.

---

⚽ 자, 머리를 굴려볼 시간이야!

백엔드 작업자에게 작업물을 넘기고 나서 다시 받으면 스타일이 무너지는 경우가 흔하다.
다른 사람도 그런진 모르겠지만, 나는 그 상황을 좋아하고 즐기는 편이다. 보통 이 순간을 기다린다.

어려운 디자인을 전달받는 때에도 HTML 구조나 CSS를 어떻게 짤지 종이에 풀어보고서 작업하는 맛을 즐기곤 했었다. (보통 디자이너 분들 중에 구현이 가능한지, 어려운지 모르시는 분들이 많기에.. 신경쓰지 말고 사용자를 배려하면서 예쁘게 부탁드린다고 하는 편이었다)

그리고 내 신조 중 하나인데, 디자이너가 준 디자인을 완벽하게 구현하지 못한다면 그건 내 실력이 부족한 것이다. 3년 간 업계에 있으면서 느낀 것은 이런 생각이었다.

함께 일하던 마케터도 장난을 담아 "지안씨가 못한다고 하는 건, 못하는게 아니라 귀찮아서 안하는거래요~" 라며 놀릴 때가 있었다. 그런 말을 듣고나면 자존심이 허락하지 않아서 바로 해내고 만다.

아무튼 이런 사람인 내게 백엔드 담당자분께서 재미있는 문제거리를 주었다.
위의 코드는 내가 직접 짠 HTML 구조가 맞다. 저렇게 보면 무슨 문제가 있었는지 알기 어려울 것이다.

이 부분을 확인한다면 문제를 찾을 수 있을 것이다.
한 댓글 데이터 당 하나의 ul을 묶어서 가져온다는 것이다.

<ul>
  	<!-- 팀원 1의 댓글창 -->
	<li>
      <ul><!-- 전송받은 댓글 데이터 --></ul>
      <ul><!-- 전송받은 댓글 데이터 --></ul>
      <ul><!-- 전송받은 댓글 데이터 --></ul>
      <ul><!-- 전송받은 댓글 데이터 --></ul>
      <ul><!-- 전송받은 댓글 데이터 --></ul>
  	</li>
  
  	<!-- 팀원 2의 댓글창 -->
	<li>
      <ul><!-- 전송받은 댓글 데이터 --></ul>
      <ul><!-- 전송받은 댓글 데이터 --></ul>
      <ul><!-- 전송받은 댓글 데이터 --></ul>
      <ul><!-- 전송받은 댓글 데이터 --></ul>
      <ul><!-- 전송받은 댓글 데이터 --></ul>
  	</li>
</ul>

데이터를 출력하게 되면 HTML 구조가 이렇게 된다.
ul>li>ul>li 구조에서 ul>li>ul*n>li 이런 구조가 되는데 이럼 안된다.
li에 ul을 여러개 갖는 것은 문제가 된다고 생각하기에 데이터를 가져오는 부분에 영향을 주지 않고 스무스하게 바꿔나갈 수 있을지 5분 정도 고민을 했다.

처음엔 스타일을 갈아엎을까? 하며 효율을 생각해보기 시작했다. 그건 극강의 비효율이다.

그래서 내가 선택한 방법은 바로 div로 태그를 변경하기로 결정했다.
유지보수에 좋은 css로 작업했기에 각 클래스명으로 적용되어 태그를 바꿔도 아무 일이 일어나지 않는다.

백엔드 담당자에게서 돌아온 이 부분의 댓글 목록은

이렇게 원래의 모습을 되찾게 되었다.

---

🎊 우리들의 첫번째 프로젝트가 완성되었다!

지금은 깃허브를 이용해 배포를 해서 미니프로젝트 OTL 깃허브 웹호스팅 도메인을 가지고 있다.
모바일로도 접속이 가능하니, 자유롭게 들어가서 확인해보시고 댓글 하나씩 남겨보셔도 좋을 것 같다.

마지막으로 추가 작업한 부분이 있다면 '저사모톡' 바로가기 를 클릭해 스무스하게 스크롤이 내려가도록 설정한 후,

채팅으로 스크롤 다운되도록 #chat 을 주어 이동시켰다.
채팅방의 디자인은 상단부와 동일하게 주기 위해 Apple의 아이폰 메세지와 유사하게 작업했다.
글자가 길어질 때, 짧을 때를 모두 테스트해보며 어색한 부분은 없는지 확인도 완료되었다.

/* 현재 날짜 출력 */
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
document.getElementById("today_date").innerHTML = new Date().toLocaleDateString('ko-KR', options);

11월 7일 목요일 부분은 Javascript를 이용해 자동으로 변경되도록 설정했다.
이 부분도 백엔드 담당자에게 부탁하는 것은 부끄러운 일 같아서 직접 작업해보았다!

---

✅ 앞으로 우리팀이 확장할 예정인 항목

1. 회원가입 (깃허브 연동)
2. 로그인/로그아웃
3. 도메인 구매
4. 개별 서버 이동
5. 댓글 삭제
6. 채팅방 추가
7. 개인 프로필 설문지 추가
8. 친해지러가기 클릭 시, 1:1 메세지로 확장
9. 푸쉬알림 설정
10. Ai 연동

아직까지는 이정도를 구상하고 있는데 더 추가될 것 같다. 다른 팀이 되어 바빠지더라도 짬짬히 작업을 진행할 생각이다.

퍼블리싱은 금방 뚝딱 해내기에 제대로 된 백엔드 기술만 다지면 완벽하게 자신있다. 각자 살아가기에 바빠서 신경을 못쓰는 일도 생길 수 있지만 가능한 계속 신경쓰고 싶다. 이번 미니프로젝트는 첫 내 자식이라는 느낌이 강하다. 물론 내가 작업한 모든 아이들이 내 자식이지만 이번에는 협업이 담겨 조금 더 소중한 것 같다.

---

큰 그림을 그리며 작업한 보람이 있는 멋진 작업물인 것 같다!