👩🏻‍💻 크롤링을 활용한 사이트 제작 - 2

1️⃣ 서버 배포 및 도메인 연결

1) 서버 배포
: AWS에서 서버를 구매한 후에 해당 페이지를 서버에 올려서 배포했다. 서버에 올리는 과정에서는 크게 어려운 점은 없었지만 서버 환경을 설정하는 과정에서 패키지를 설치하고 포트를 열어주는 등의 기본적인 세팅이 필요했다.
2) 도메인 연결
: 가비아에서 도메인을 구매하여 서버와 도메인을 연결시켰다.

2️⃣ og 태그 추가

모바일로 url을 공유할 때 대표 이미지와 타이틀, 설명이 나올 수 있도록 og 태그를 추가했다. 하지만, 추가한 후에 카카오톡에서 기본적으로 저장해 둔 데이터기 있기 때문에 바로 변경이 되지는 않았다. 카카오톡 상에서의 기존 오픈 그래프를 삭제한 후에 다시 공유를 하니 og 태그가 제대로 변경되었다.

3️⃣ 모바일 버전 : 반응형 에러

처음 css로 스타일을 설정할 때 데스크탑과 모바일의 레이아웃을 따로 설정했다. 아무래도 모바일 화면의 크기로 데스크탑에서의 레이아웃을 그대로 보여주는 것이 사용자 입장에서는 불편하기도 하고 모든 요소들이 작게 보이기 때문에 쉽게 이용하고 편하게 화면을 볼 수 있도록 화면 크기에 따른 레이아웃 조정을 했다. 그런데, 데스크탑에서는 모바일 크기로 화면을 줄이면 모바일 버전의 레이아웃이 제대로 반영되었지만 실제 모바일에서 페이지에 접속하면 데스크탑 레이아웃이 그대로 뜨는 것이었다...
어떻게 해결을 해야 하나 생각하던 중에 viewport 메타태그를 발견했다!
viewport는 모바일웹이나 반응형 웹에서 각각의 기기장치를 인식할 때 사용하는 중요한 태그로 장치의 화면 너비를 따르도록 페이지 너비를 설정한다고 선언하는 아주 중요한 태그였다. 웹개발 종합반에서 수강할 때는 따로 태그를 추가할 필요 없이 그대로 반영이 되었는데, 아무래도 환경에 따라 또 작성한 코드에 따라 추가적인 설정이 필요한 것 같았다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

구글에서 발견한 위의 코드를 그대로 추가하니 바로 모바일 반응형으로 레이아웃이 반영이 되었다.
어떤 점에서 태그를 넣었을 때, 넣지 않았을 때 달라지는지 그 원리에 대해서는 정확하게 이해할 수는 없었지만 어떤 상황이 생길지 모르기 때문에 항상 추가를 해놓고 코드를 작성하는 것이 좋을 것 같다!
-> 새로 알게 된 중요한 태그인 것 같으니... 더 알아보고 공부를 해봐야겠다!

👉🏻 웹개발 종합반에서의 실습 파일을 열어봤더니 html 파일에 viewport 메타태그가 있었다... 그저 붙여넣기만으로 실습을 진행해서 아주 중요하고 사소한 태그들을 파악하지 못하고 지나친 것 같다...ㅠ 그래도 지금이라도 알게 된 게 참 다행이다!
결론은....! 반응형으로 웹페이지를 구상하기 위해서는 viewport 메타태그가 반드시 필요하다!!