본문 바로가기

분류 전체보기14

웹사이트 SNS 공유 최적화, OpenGraph OG 설정하기 웹앱을 만들때 신경써야할 부분이 있습니다. 바로 OG 메타태그 인데요. OG는 OpenGraph 프로토콜의 약자로 페이스북에서 만든 HTML 페이지의 속성입니다. 쉬운 예로 우리가 만든 웹앱을 카카오톡 등의 메신저로 공유를 할때 미리보기 형태로 보여지는 부분을 설정할때 쓰입니다. 바로 확인해보고자 MBTI 테스트 앱의 URL을 카카오톡에서 공유를 해보았습니다. index.html 페이지내에 노출되는 첫이미지가 로고이미지기 때문에 저 이미지가 노출되고 있고 따로 설명을 작성한게 없기때문에 "여기를 눌러 링크를 확인하세요."라는 문구가 표시되고 있습니다. SNS로 공유시 표시되는 내용을 바꿔 보도록 하겠습니다. index.html 파일을 열어서 사이에 아래 코드를 추가합니다. 이때 thumb.jpg 이미지 .. 2023. 6. 5.

파비콘(favicon) 설정하기 파비콘이란 사이트 접속시 브라우저 제목표시줄에 보여지거나 즐겨찾기 등록시 아이콘으로 표시 되는 웹사이트를 대표하는 아이콘입니다. 간단하게 사이트 몇군데 살펴 보겠습니다. 브라우저 제목표시줄에 사이트의 파비콘이 나타나고 있는걸 볼 수 있습니다. (1번 부분) 그리고 2번 부분 북마크바에도 각 사이트의 파비콘이 보여집니다. 현제 제가 만든 mbti.monster 페이지는 파비콘 설정을 하지 않아 기본 아이콘으로 표시가 되고 있습니다. 저 페이지에 파비콘을 설정 해보도록 하겠습니다. 먼저 아이콘으로 쓸 이미지 파일을 준비 합니다. 이미지 하나를 여러 기기의 해상도에 대응하는 파비콘 파일로 만들어주는 서비스를 이용하도록 합니다. https://www.favicon-generator.org/ Favicon & A.. 2023. 5. 28.

Cloudflare 도메인 연결하기 목차 1. 도메인 업체 소개 2. 도메인 구입하기 3. 도메인 연결하기 4. 마무리 Cloudflare 도메인 연결하기 앞서 우리가 만든 웹앱을 클라우드 플레어 Pages로 배포를 하고 해당 URL로 접속을 하여 앱이 실행되는 것을 확인하였습니다. 그런데 클라우드 플레어에서 제공해주는 URL은 편의를 위해 고객에게 제공해주는 URL입니다. 그렇기 때문에 짧고 의미있는 이름은은 이미 누군가 사용하고 있을 가능성이 높습니다. 이번 시간에는 원하는 도메인을 구매 하고 이 도메인으로 앱에 접속할 수 있게 설정하는 법을 알아보겠습니다. 1. 국내 도메인 업체 소개 도메인 업체는 국내외로 굉장히 많으며 클라우드 플레어에서도 도메인을 구입할 수있으나 국내 도메인 업체를 몇군데 알아보고 구매를 해보도록 합니다. 가비아.. 2023. 5. 28.

웹앱을 배포하는 6가지 방법 목차1. 앱 배포 방법 2. 클라우드 플레어 가입하기 3. 클라우드 플레어 페이지로 앱 배포하기 5. 마무리 웹앱을 배포하는 6가지 방법 앞서 만들어본 MBTI 웹앱을 누구나 사용할 수 있도록 배포하는 방법을 몇가지 알아보고 클라우드 플레어 서비스를 사용하여 실제 서버에 배포해보겠습니다. 이제 인터넷만 되면 언제 어디서나 우리가 만든 웹앱을 사용할 수 있게 됩니다. 1. 앱 배포 방법1) 파일을 직접 전달가장 간단한 방법으로 웹앱을 구성하고 있는 파일들을 복사해서 USB메모리 카드에 담거나, 압축파일로 만들어 메일 혹은 메신저로 첨부해서 보내는 방법입니다. 지극히 비밀스러운 앱을 제작했다면 모르겠으나 웹이라는 이점을 활용하지 못한 방법이라 할 수 있겠습니다. 2) 웹서버 구축PC에 Apache, Ngin.. 2023. 5. 28.

HTML 설명 및 로또번호 추천 앱 코드 직접 수정해보기 목차 1. HTML이란? 2. HTML 기본 구조 및 설명 3. 로또번호 추천 앱 코드 살펴보기 4. 코드 수정해보기 5. 마무리 앞의 과정에서 모바일 앱 제작 방식에 따른 분류를 알아 보았습니다. 그리고 로또번호 추천 앱을 웹앱 형태로 만들어 보았습니다. ChatGPT에게 요구사항을 요청하면 계속 코드를 수정해주지만 HTML 구조와 내용을 알면 직접 수정할 수도있고 좀 더 구체적으로 요구사항을 요청할 수 있습니다. 이번시간에는 HTML 기본을 간략하게 알아보고 우리가 만들었던 로또번호 추천 앱의 HTML 코드도 같이 살펴봅니다. 그리고 직접 코드도 수정해보기로 합니다. 1. HTML이란? 위키백과에서 HTML 정의를 보면 위 이미지 처럼 되어있습니다. 내용이 좀 어려운데 쉽게 생각하면 웹 페이지에서 글.. 2023. 5. 22.

티스토리 글 대표이미지 설정하기 티스토리 블로그 글을 작성하고 저장을 하면 따로 지정을 하지 않아도 대표이미지가 설정됩니다. 대표이미지는 글 목록이나 글 상세보기 화면 상단 글제목 부분에 배경으로 보여지는 이미지 입니다. 글 작성시 대표이미지를 따로 지정하지 않았다면 보통 본문 내에 삽입한 첫번째 이미지를 자동으로 대표이미지로 설정이 됩니다. 티스토리 사용이 익숙하지 않으신 분들은 자동으로 설정된 대표이미지를 어떻게 바꾸는지 모르실 수 있다고 생각되어 기록으로 남겨둡니다. 티스토리 블로그 글의 대표이미지를 설정하는 방법은 세가지가 있습니다. 1. 자동으로 대표이미지 설정 하는 방법 2. 글 저장시 대표이미지 설정 하는 방법 3. 글 편집화면에서 대표이미지 설정하는 방법 하나씩 살펴보도록 하겠습니다. 1. 자동으로 대표이미지 설정 하는 .. 2023. 5. 22.

ChatGPT로 수익 창출 앱 만들기 - MBTI 테스트 앱 제작하기 MBTI 테스트 앱 제작하기 이번 시간에는 MBTI 유형 분석 앱을 구상해보고 웹 앱까지 만들어보겠습니다. 목차 1. MBTI란? 2. 앱 요구사항 3. 기본 코드 생성하기 4. 시작화면 수정하기 5. 질문화면 수정하기 6. 결과화면 수정하기 7. 마무리 1. MBTI란? MBTI는 사람의 성격 유형을 E/I, S/N, T/F, J/P 네가지로 구분합니다. 이 조합으로 총 16가지 성격 유형이 만들어집니다. 챗GTP의 답변에는 안나오지만 A/T라는 지표도 있는데 덜 중요하기 때문에 이건 생략하도록 하겠습니다. 잘 알려진 무료 MBTI 검사 서비스로 16personalities.com 이 있습니다. 16personalities 사이트에서 MBTI 검사를 진행해보며 캡처를 해보았습니다. 위 사이트를 참고로 .. 2023. 5. 18.

ChatGPT 확장 프로그램 추가하기 목차 1. ChatGPT 특성 2. ChatGPT 크롬 확장 프로그램 3. 프롬프트지니 소개 4. AIPRM 소개 5. 마무리 ChatGPT 확장 프로그램 추가하기 ChatGPT는 확장 프로그램을 같이 사용하면 더 빠르고 강력해집니다. 인기있는 두가지 확장 프로그램을 소개하고 설치하는 방법을 알려 드립니다. 1. ChatGPT 특성 ChatGPT는 그냥 대충 질문해도 훌륭한 답변을 해주지만 특성을 이해하고 사용하면 더욱 더 좋은 답변을 받을 수 있습니다. ChatGPT가 학습한 데이터는 영어 문서가 압도적으로 많습니다. 그렇기때문에 한글 보다는 영어로 질문을 하면 더욱 정확한 답변을 얻을 수 있습니다. 그리고 한글에 비해 영어 질문에 대한 답변 속도가 훨신 빠릅니다. 이 외에도 한글로 질문하면 답변이 짧.. 2023. 5. 18.

이전 1 2 다음

티스토리툴바