재미로 한국에서 인적성 검사를 하는 것은 꽤 인기가 있습니다. 가장 유명한 것은 16personalities의 MBTI 테스트로 다양한 종류가 있습니다. 이렇게 말씀드린 이유는 오늘은 이런 앱을 만드는 특강이 있었는데 그 수업을 위해 오늘 유명한 프로그래머 겸 유튜버가 강사로 오셨다는 ​​것! 그와 앱이 궁금하다면 이 비디오와 그의 채널을 확인하세요. 영어 자막도 있습니다.
웹 앱을 만드는 것은 꽤 쉽고 재미있었다. 나는 어떤 아이디어에 대해 생각하고 새로운 것을 생각해 내면 다음에 또 다른 것을 만들려고 노력할 것입니다.

오늘 배운 몇 가지.

부트스트랩 사용.

라이브러리를 잘 사용해본 적이 없어서(기본적인 것을 먼저 알아야 할 것 같아서 사용을 자제하려 했습니다) 오늘 부트스트랩을 거의 처음 사용하게 되었습니다. 아주 쉽고 간단하기 때문에 무언가를 아주 빠르게 만들고 싶고 출시하거나 테스트하고 싶을 때 사용하면 상당히 좋은 것 같습니다. 라디오 버튼, 버튼, 솜 기본 스타일링에 활용했습니다. 예를 들어 마진 상단을 지정하기 위해 class="mt-3"을 지정했습니다. 정말 쉽습니다! 또한 아래의 라디오 버튼에 대한 코드를 CSS로만 작성해야 한다면 시간이 훨씬 더 걸리지만 부트스트랩을 사용하면 1분밖에 걸리지 않습니다.

<div class="btn-group mt-3" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check yes" name="q1-btnradio" id="q1-btnradio1" autocomplete="off">
  <label class="btn btn-outline-primary" for="q1-btnradio1">Yes</label>

  <input type="radio" class="btn-check no" name="q1-btnradio" id="q1-btnradio2" autocomplete="off">
  <label class="btn btn-outline-danger" for="q1-btnradio2">No</label>

  <input type="radio" class="btn-check maybe" name="q1-btnradio" id="q1-btnradio3" autocomplete="off">
  <label class="btn btn-outline-success" for="q1-btnradio3">Maybe</label>
</div>

+ 파비콘 만들기!

당신은 favion을 만들 수 있습니다 here

Netlify를 통한 배포

포트폴리오 웹사이트를 만들 때 Netlify를 한 번 사용한 적이 있는데 이력서에 넣기 위한 것일 뿐이고 많은 사람들이 사용할 수 있는 서비스를 출시한 적은 없습니다. 사용법을 잊어버릴 뻔했는데 사용이 매우 간편하고 무료였습니다! 우리는 정말 저렴한 도메인을 사서 연결했습니다. 내 앱을 테스트하기 위해 해당 도메인을 사용할 수 있습니다 :)

소셜 미디어용 공유 버튼 추가

이를 위해 addthis을 사용했습니다!

우리가 사용한 것은 '공유 버튼'이었지만 다른 많은 기능들도 있습니다. 추가할 버튼 유형(추가할 소셜 미디어 버튼, 웹사이트에 표시할 방법 - 예: 인라인 등)을 선택하기만 하면 몇 줄의 코드가 제공됩니다. 복사하여 html 파일에 붙여넣어야 하며 바닥글 안에 추가했습니다.


* 위 사진에서 보시는 바와 같이 공유 버튼이 추가되었으며 바닥글 내부에도 광고가 있습니다.

앱에 광고 추가

이를 위해 kakaoAdFit을 사용했습니다. 재가입 없이 카카오 아이디로 가입할 수 있었습니다. 하는 방법도 매우 쉽고 간단했습니다. 이를 위해 HTML에 몇 줄의 코드를 추가하기만 하면 됩니다. 광고를 추가하는 가장 쉽고 간단한 방법이기 때문에 이것을 사용한 것 같지만 나중에 프로젝트에 Google 광고를 추가하고 싶습니다.

SEO(검색 엔진 최적화)

한국에서는 네이버(검색 플랫폼인 한국의 구글처럼)를 많이 사용하기 때문에 검색 시 네이버에 뜨도록 웹사이트/웹앱을 추가하는 방법을 배웠습니다. Search Advisor

추가할 웹사이트의 URL을 추가합니다.

웹 사이트의 소유자인지 확인합니다(제공하는 html 파일을 다운로드하여 프로젝트 폴더에 추가하고 배포하거나 html 메타 태그를 복사하여 html 파일에 붙여넣고 배포할 수 있음)

확인되면 돋(Verification) > robots.txt로 이동합니다. robot.txt를 다운로드하고(단순히 생성하고 다운로드할 수 있는 도구와 버튼이 있음) 프로젝트 폴더에 넣습니다(루트 디렉토리에 있어야 함)

이제 사이트맵 파일이 필요합니다! Google에서 '사이트 맵 만들기'를 검색하고 첫 번째 결과인 xml-sitemaps으로 보이는 것을 열고 URL을 추가하고 시작을 클릭합니다. 사이트맵 파일을 다운로드하고 이 사이트맵 파일을 프로젝트의 루트 디렉터리에도 추가해야 합니다.

다시 배포하고 네이버의 검색 도우미로 이동합니다. 보증(Verification) > robots.txt로 이동한 후 수집요청(수집 요청)을 클릭하여 robots.txt를 확인합니다.

완료되면 요청(요청) > 사이트맵제출(사이트맵 제출)로 이동하여 사이트맵 파일 이름을 추가합니다.

SEO checkup

SEO를 확인하고 개선할 수 있는 부분을 찾을 수 있습니다.