(24.04.17) Markup 및 마무리 단계

Markup 담당 작업 계획 및 정리

목표

• 6시간 내 빠르게 작업을 완료해서 팀원에게 GitHub으로 공유, 수정 및 완성을 할 수 있도록 효율적으로 작업

계획

1. 팀원들의 기능 구현 완료 HTML/CSS 코드 GitHub에서 확인
2. CSS 변경 작업
   1. 수정 툴 정하기
      • Visual Studio
      • Adobe Dreamweaver **이슈발생**
   2. 컨셉 정하기
      • 우주를 팀원이 우주선을 타고 탐험하고 있고, 사용자가 그 탐험에 참여=탑승 하는 컨셉
   3. Head 디자인 변경
      • Head의 팀원소개, 팀 목표 두 슬라이드가 좌우로 전환 가능
        • 로켓이 날아가는 이미지 제작하여 넣어서 우주선이 좌로 날아가는 모습으로 **이슈발생**
   4. 팀원소개 슬라이더 변경
      • 카드 크기 조정 및 이름, 버튼스타일 변경 및 리디자인
   5. 수정 페이지 변경
      • 사진, 버튼 정렬 및 리디자인
   6. 팀원 등록 변경
      • 톤앤매너에 동떨어질 수 있는 등록 구역 변경
      • 탑승하기 강조버튼을 강조해서 등록되는 기능을 강조해서 알려주기
        • 우주인이 탑승하기 버튼을 가리키는 이미지를 추가하여 팀원 소개 슬라이더와 구분 및 버튼기능 강조 **이슈발생**
   7. 마무리 정리
      • 전체 요소 정렬 및 기능 오류 수정
        • 사진 미등록 시, 디폴트 이미지를 추가
      • GitHub에 Commit

---

 

이슈 발생 및 해결

HTML CSS 수정툴 사용 이슈

브라우저의 개발자모드와 별반 다를 바 없는 Dreamweaver

• Photoshop과 Illustrator와 호환이 되어 쉽게 요소를 변경할 수 있을 것이라고 생각해서 먼저 Adobe Dreamweaver를 임시로 설치 사용
  • → 파일 Merge 에러의 지속 발생 + Ps Ai와 전혀 다른 UI에서 오는 불편함의 시간이 계속 늘어짐

원인

• Visual Studio의 Preview 플러그인과 같이 사용하고 있었는데, Dreamweaver가 Visual Studio 작업물을 로드하는 시간이 너무 길어서 실시간 반영이 어려워 Merge Error 가 발생
• 일반 브라우저의 개발자모드와 크게 상이하지 않은 Dreamweaver의 기능
  • 아직 초보 사용자라 추후 좀더 살펴봐야함

해결

• 과감하게 Dreamweaver 포기 하나의 툴 Visual Studio와 부족한 기능은 HTML Preview 플러그인을 사용 결정
• Photoshop과 illustrator 때문에 Adobe 소프트웨어 환경을 구축하려고 했지만, 괜히 Visual Studio가 깔끔하고 성능이 좋은 것이 아니었음. 앞으로 계속 VS만 사용할 수 있도록!

 

이미지 추가 이슈

• 이미지URL 로 불러올 수 없는 자체 제작의 이미지일 경우에는 다른 DB가 구축이 되어서 그곳에서 이미지를 가져와야하지만, 협업단에서 하루만에 빠르게 Markup을 해야하기때문에 DB 구축이 불가능한 상황
• 설사 기존의 이미지를 인터넷에서 가지고 쓴다고 해도 원하는 이미지를 찾는데 많은 시간을 할애

원인

• DB를 물리려면 Firebase 키값이 두배로 늘어나게된 코드
• 팀원들 추가 DB에 대해 합의가 안된 상태

해결

https://andrew75313.tistory.com/71

• 본인 개인 블로그에 공개 게시물로 Photoshop 작업을 해서 파일을 따와서 사용
  • 어차피 아카이빙을 하기 때문

 

---

 

 코멘트

• 다행히 기존에 배웠던 강의를 기반으로 팀원들과 만든 코드이기때문에 코드를 빨리 이해해서 변수를 사용해서 스타일을 교체할 수 있었음
• 기획 PM 관련해서 빠르게 브레인스토밍해서 디자인 치는 습관이 아직 남아있어서 생각보다 빠르게 작업을 끝낼 수 있었음