카테고리 없음

제24차_사업개발캠프 블로(하루만에 채팅앱 만들기)

digital520 2024. 2. 6. 10:19

채팅앱 개선해보기

완성된 채팅앱을 나만의 스타일로 꾸며봅니다.

https://www.notion.so/840ddead9e69463fa4969fc846a1fc58?pvs=4#8ca887f2f9c6455abb4a4bcf92635468

채팅앱 개선해보기 | Notion

아임웹을 비롯한 노코드 웹 페이지 제작 툴을 이용해 빠르게 사업을 시작할 수 있지만, 확장성에서는 한계가 명확합니다. 이를 극복하기 위해서는 직접 코딩을 하거나, 외주(개발자)를 맡기게

legend-palm-1f1.notion.site

📌 아임웹을 비롯한 노코드 웹 페이지 제작 툴을 이용해 빠르게 사업을 시작할 수 있지만, 확장성에서는 한계가 명확합니다. 이를 극복하기 위해서는 직접 코딩을 하거나, 외주(개발자)를 맡기게 됩니다. 이번 과제 실습을 통해 적어도 어떤 부분이 수정되어야 하는지, 코드는 어디에 추가되는지 등 기본적인 개념을 습득하실 수 있습니다.

실습 과제

아임웹을 내 사업에 맞게 코딩하여 커스터마이징 할 수 있다는 거 아시나요?

이번 과제를 통해 웹사이트의 스타일을 담당하는 부분과 기능을 담당하는 부분을 파악해 봅니다.

또 추가한 코드가 어떻게 적용되는지도 함께 알아보겠습니다.

🔽 아임웹 공식 가이드에 지원하지 않는 디자인 및 기능은 코드로 구현해서 사용할 수 있다고 안내되어 있음.

아래 CSS 코드와 Javascript코드를 여러분이 작성한 “index.html”에 적용해서 기존 채팅앱에 변화를 줘봅시다.

코드를 적용하는 방법은 직접 코드를 작성하시거나 제공된 코드를 복사해서 붙여 넣으시면 됩니다.

CSS(Cascading Style Sheets)는 규칙 기반 언어입니다. 따라서 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의합니다.

CSS를 작성하는 방법은 3가지가 있습니다. 그 중 index.html에 사용된 방식은 style 태그 사이에 작성하는 방법입니다.

아래와 같이 <style></style> 태그 사이에 CSS 코드를 넣습니다.

<style>

css 코드

</style>

📃CSS - 채팅앱 개선 디자인을 위한 코드 ( /* */ : 주석을 작성할 때 사용하는 코드로, 주석은 프로그램 작동에는 관여하지 않습니다. )

<style>
/*웹페이지의 전체적인 배경색을 #fafafa(밝은 회색)로 설정하고, 폰트를 'Apple SD Gothic Neo'로 설정합니다. 
  이 폰트가 없을 경우 기본 sans-serif 폰트를 사용합니다.*/
     body {
        font-family: "Apple SD Gothic Neo", sans-serif;
        background-color: #fafafa;
      }
			
/*채팅창의 외부 컨테이너에 대한 스타일을 설정합니다. 컨테이너의 최대 너비를 500px로 제한하고, 중앙에 위치시키며, 
  테두리 모서리를 둥글게 하고, 그림자 효과를 추가합니다.*/
      #container {
        max-width: 500px;
        margin: 0 auto;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      }
/*채팅창의 헤더 부분에 대한 스타일을 설정합니다. 배경색을 #1fcf89(연두색)로 설정하고, 글자색을 흰색으로 설정합니다. 
  패딩을 통해 내부 여백을 추가하고, 폰트 크기를 1.5em으로 설정합니다.*/
      #header {
        background-color: #f0dd08;
        color: white;
        padding: 10px 20px;
        font-size: 1.5em;
      }
/*채팅 메시지가 표시되는 영역에 대한 스타일을 설정합니다. 높이를 500px로 설정하고, 패딩을 통해 내부 여백을 추가하며, 
  스크롤 가능하게 설정합니다. 테두리를 추가하고, 배경색을 흰색으로 설정합니다.*/
      #chatlist {
        height: 500px;
        padding: 20px;
        overflow: auto;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        background-color: white;
      }
/*채팅 입력창 영역에 대한 스타일을 설정합니다. flexbox를 사용해 내부 요소들을 수평으로 배열하고, 
  패딩을 통해 내부 여백을 추가하며, 배경색을 흰색으로 설정합니다.*/
      #bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background-color: white;
      }
/*채팅 메시지 입력창에 대한 스타일을 설정합니다. flex-grow를 사용해 남은 공간을 모두 차지하도록 하고, 
  테두리를 추가하며, 패딩을 통해 내부 여백을 추가합니다.*/
      #message {
        flex-grow: 1;
        margin-right: 10px;
        padding: 5px;
        border-radius: 20px;
        border: 1px solid #ddd;
      }
/*채팅 메시지 전송 버튼에 대한 스타일을 설정합니다. 배경색을 #1fcf89(연두색)로 설정하고, 글자색을 흰색으로 설정합니다. 패딩을 통해 내부 여백을 추가하고, 
  테두리 모서리를 둥글게 하며, 마우스 커서를 포인터로 변경합니다. 그리고 글자를 굵게 하고, 폰트 크기를 1em으로 설정합니다.
  이렇게 각 스타일 코드는 특정 요소의 시각적 표현을 제어하는 역할을 합니다.*/
      #btn {
        padding: 5px 20px;
        background-color: #f0dd08;
        color: white;
        border-radius: 20px;
        cursor: pointer;
        font-weight: bold;
        font-size: 1em;
      }
</style>

📃 Javascript - “ENTER” 키를 입력해 메시지를 입력할 수 있도록 만들어 주는 코드

Javascript는 “웹페이지의 생동감을 불어넣기 위해” 만들어진 프로그래밍 언어입니다

아래와 같이 <script></script> 태그 사이에 Javascript 코드를 넣습니다.

<script>
        $("#message").keypress(function (e) {
          if (e.which == 13) {
            // Enter 키의 ASCII 코드는 13입니다.
            sendMsg();
            $("#message").val("");
            return false; // form의 '빈 값' 자동 제출을 방지합니다.
          }
        });
      });
</script>

과제 제출 방법

이번 웹 개발 학습의 과제는 본인의 컴퓨터에서 작성한 index.html 파일을 복사하여 과제 제출 페이지에 업로드해 주시거나, 본인이 작성한 코드를 복사하신 후에 과제 제출 페이지를 캡처한 아래 사진의 빨간 네모 칸의 코드 블록 내부 위치에 붙여넣기 해주세요!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>비밀 채팅앱</title>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>
    <script src="./ceocamp.js"></script>

    <script>
    $(document).ready(()=>{

      loadMsgs();

      $("#btn").on("click",()=>{
        sendMsg();

      });
      $("#message").keydown((key)=>{
        if(key.keyCode == 13){ sendMsg()};
      })

    });


    </script>

    <style>
      #container {
        border:15px solid pink;
        width:100%;
      }

      #header {
        border:1px solid black;
        text-align: center;
        width:100%;
      }

      #chatlist {
        height:500px;
        width:100%;
        overflow: scroll;
      }

      #bottom {
        border:1px solid black;
        height:20px;
      }

      #btn {
        float:right;
        width:14%;
        color:white;
        background-color: black;
      }

      #message {
        float:left;
        width:84%;
      }

    </style>
  </head>
  <body>
    <div id="container">
        <div id="header">
            비밀 채팅 
        </div>
        <div id="chatlist">
        </div>
        <div id="bottom">
            <input id="message" type="text" name="message" placeholder="내용입력">
            <div id="btn">보내기</div>
        </div>
    </div>
  </body>
</html>

셀프 채점 기준

[ ] CSS와 Javascript 코드가 작성되는 위치를 정확히 알고 있는지
[ ] CSS 코드가 하는 역할에 대해 알고 있는지
[ ] Javascript 코드가 하는 역할에 대해 알고 있는지

[선택과제] 검색엔진 최적화(SEO)

내가 만든 사이트를 검색엔진(naver, google)에서 찾기 쉽도록 사이트를 개선하는 방법에 대해 알아봅니다.

📌 검색엔진 최적화를 통해 검색 결과에 좀 더 잘 노출될 수 있는 사이트를 만들어 볼 수 있습니다.

P.S. 해당 과제의 내용은 이전에 학습 및 실습해 본 경험이 있으실 겁니다. 하지만 웹 개발 학습에 들어와서 코딩에 대해 배웠으니, 이전의 학습을 되돌아보기 위해, 그리고 제공된 보다 상세한 설명과 함께 실습을 진행해 보시는 것을 추천해 드립니다. (이전에 학습하셨던 페이지)를 같이 보시면 좀 더 원활하게 과제 실습을 진행하실 수 있습니다.)

https://www.notion.so/BD-3-fe9adefa8c224e289c29e18d1fd61955

BD를 위한 창업가 정신 - 3일차 | Notion

[ 오늘의 명언 ] “스타트업은 돈도, 사람도, 시간도 부족합니다. 그래서 더더욱 최소 기능 제품(MVP)과 핵심가설검증(PoC)이 중요합니다” - 토스 이승건 대표 오늘 배울 내용 중 하나인 MVP는 확실

legend-palm-1f1.notion.site

실습 과제

검색엔진 최적화(Search Engine Optimization)

웹 사이트(Naver, Google)가 검색 결과에 더 잘 노출되도록 최적화하는 과정입니다. 이를 검색 랭크 개선이라고 합니다.

대표적인 2개의 검색 사이트로 Naver와 Google이 있습니다.

각각의 사이트는 본인의 사이트가 보다 잘 검색될 수 있는 방법에 대해 명시해 놓았습니다.

Naver 검색엔진 최적화 가이드 확인하러 가기

SEO 기본 가이드

웹사이트 사용자에게 도움되는 방향으로 사이트와 사용자 환경 개선을 목표로 최적화해야 합니다. 네이버 검색로봇도 사용자에 해당되며 검색엔진 최적화(SEO)를 통해 네이버 검색로봇이 사이

searchadvisor.naver.com

Google 검색엔진 최적화 가이드 확인하러 가기

SEO 기본 가이드: 기본사항 | Google 검색 센터 | 문서 | Google for Developers

검색엔진 최적화의 기본사항에 관한 지식만으로도 눈에 띄는 효과를 얻을 수 있습니다. Google SEO 기본 가이드에서 기본적인 검색엔진 최적화에 관해 간략히 알아보세요.

developers.google.com

뛰어난 마케팅 만큼이나 검색엔진 최적화는 중요합니다.

내용만 들어봤을 때는 굉장히 어려워 보일 수 있습니다. 하지만 걱정하지 않으셔도 됩니다. 수강생 여러분이 강의에서 배운 간단한 개념만으로도 충분히 검색엔진 최적화를 해볼 수 있습니다.

대표적인 2개의 검색 사이트에서 요구하는 검색 엔진 최적화 권고 내용을 확인해 보겠습니다.

1. <title> 은 적절한 길이로 작성합니다.

<title> 요소는 페이지 콘텐츠 제목을 나타냅니다. 제목을 매우 긴 텍스트로 작성하는 것은 옳지 않습니다.

2. <title> 태그를 누락하지 않습니다.

콘텐츠 주제를 나타낼 정확하고 고유한 제목을 만들어야 합니다. <title> 요소는 검색로봇에게 페이지의 주제가 무엇인지 알려줍니다. HTML 문서 <head> 요소 안에 <title> 요소를 추가해, 페이지 주제를 나타내는 정확하고 고유한 제목 텍스트를 작성합니다.

검색 사이트 검색 결과 영역

사이트 내 표시 영역

3. <title> 요소는 반드시 하나만 사용합니다.

<title> 요소에는 콘텐츠 주제를 나타낼 정확하고 고유한 제목이 있어야 합니다.

HTML 문서에 <title> 요소가 2개 이상 작성된 경우, 검색로봇은 어떤 <title>이 페이지 콘텐츠 주제에 부합하는지 분석해야 합니다. 이 경우 검색로봇이 추가 작업을 해야하므로 좋지 못 한 페이지로 분류할 수 있습니다.

4. <title> 에 작성한 내용이 다른 사이트와 중복되지 않도록 합니다.

<title> 요소에는 콘텐츠 주제를 나타낼 정확하고 고유한 제목이 있어야 합니다. 사이트내 여러 페이지들이 동일한 **<title>**을 가진 경우, 검색로봇은 어떤 페이지가 <title>에 가장 적합한지 분석해야 합니다. 이런 <title> 요소들은 콘텐츠 주제에 적합하지 않고, 어떤 페이지를 검색결과로 노출해야할지 명확하지 않습니다. 각 페이지마다 고유한 <title> 요소를 작성해 주세요.

5. 사이트에 설명을 적는 <meta name="description"> 태그를 작성합니다.

meta description 태그는 페이지 내용을 요약하여 제공합니다. 페이지의 meta description 태그는 페이지의 요약 내용을 여러 문장으로 구성하여 작성합니다. 검색결과의 스니펫으로도 사용되니 각 페이지마다 요약 내용을 입력해주면 좋습니다. meta description 태그는 HTML 문서 <head> 요소 안에 있습니다.

6. <meta name="description"> 태그 안에 작성한 내용이 다른 사이트와 중복되지 않도록 합니다.

<title> 요소에는 콘텐츠 주제를 나타낼 정확하고 고유한 제목을 작성하듯이, meta description도 고유한 요약 내용으로 작성해야합니다. 여러 페이지에 동일한 meta description이 있다면 검색 로봇이 중복 문서로 분류할 수 있습니다.

7. <H1> 태그는 한 번만 사용합니다.

<H1> 태그는 제목을 나타내는 태그입니다.

<H1> 요소는 페이지 콘텐츠를 나타내는 소제목으로 사용되기에, HTML 문서에서 2개 이상 발견된다면 검색로봇이 이해하기 어려운 구조가 됩니다.

8. Alt 속성을 사용해 주세요.

콘텐츠 이미지에 설명(Alt) 속성이 있으면 네이버 검색로봇이 이해하기 좋은 구조입니다. 페이지 콘텐츠와 이미지에 대한 주제를 잘 해석할 수 있습니다.

📌 위 권고 사항을 바탕으로 아래 코드를 수정 또는 추가하여 검색엔진 최적화를 진행해 보시기 바랍니다.

운영하고자 하는 서비스명을 적어주세요
서비스 명:
서비스에 대해 간단한 설명을 적어주세요
설명 :

작성한 내용을 아래에 적용해보고, SEO 권고 규칙에 맞지 않는 태그는 삭제해 주세요

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    //<meta name="description">태그 안에 있는 content 속성에 사이트 내용을 요약해주세요
		<meta name="description" content=" ">

	  //태그 안에 서비스명을 입력해주세요
    <title></title>
    <title></title>
</head>
<body>
    <h1></h1>
		<img src="" align=right />
    <h1></h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    //<meta name="description">태그 안에 있는 content 속성에 사이트 내용을 요약해주세요
		<meta name="description" content=" ">

	  //태그 안에 서비스명을 입력해주세요
    <title></title>
    <title></title>
</head>
<body>
    <h1></h1>
		<img src="" align=right />
    <h1></h1>
</body>
</html>

과제 제출 방법

셀프 채점 기준

[ ] <title> 태그가 하는 역할을 알고 있는지
[ ] <meta name="description"> 태그가 하는 역할을 알고 있는지
[ ] 검색 엔진 최적화를 진행해야 하는 이유에 대해 알고 있는지

일일 클래스&학습 도서 리뷰

개념을 명확하게 이해하기 위해서는 타인에게 가르치는 것이 가장 효율적입니다. 글쓰기 또한 그 방법 중 하나입니다.

실습 과제

오늘 VOD 강의 및 학습 도서를 통해 배운 내용 중 핵심 개념을 블로그에 정리하여 작성해 주세요.
주의할 점은 해당 강의를 보지 않은 사람이 이해할 수 있도록 타인에게 가르치듯이 작성해주세요.
- 단순 개념을 정리한 글과 타인에게 정보 전달을 위한 글은 형식 부터 차이가 있습니다.
  - 단순 개념 정리 : https://jkkou.tistory.com/42
  - 가르치듯 작성된 글 : https://ibks-platform.tistory.com/373

왜 클래스 리뷰를 하나요?
단순 강의를 듣는 것만으로는 절대로 기억할 수 없습니다. 다른 사람을 가르치는 글을 작성하는 것만으로도 기억율을 극단적으로 높힐 수 있습니다.

셀프 채점 기준

[ ] 단순 개념 정리가 아니라 타인에게 개념을 설명해 주는 형태로 작성되었는지
[ ] 강의 내용을 그대로 작성한 것이 아니라 본인의 생각이 들어갔는지

현재글제24차_사업개발캠프 블로(하루만에 채팅앱 만들기)

digital520

Today :
Yesterday :

digital520

제24차_사업개발캠프 블로(하루만에 채팅앱 만들기)

채팅앱 개선해보기

실습 과제

아임웹을 내 사업에 맞게 코딩하여 커스터마이징 할 수 있다는 거 아시나요?

아래 CSS 코드와 Javascript코드를 여러분이 작성한 “index.html”에 적용해서 기존 채팅앱에 변화를 줘봅시다.

📃CSS - 채팅앱 개선 디자인을 위한 코드 ( /* */ : 주석을 작성할 때 사용하는 코드로, 주석은 프로그램 작동에는 관여하지 않습니다. )

📃 Javascript - “ENTER” 키를 입력해 메시지를 입력할 수 있도록 만들어 주는 코드

과제 제출 방법

셀프 채점 기준

[선택과제] 검색엔진 최적화(SEO)

실습 과제

검색엔진 최적화(Search Engine Optimization)

1. <title> 은 적절한 길이로 작성합니다.

2. <title> 태그를 누락하지 않습니다.

3. <title> 요소는 반드시 하나만 사용합니다.

4. <title> 에 작성한 내용이 다른 사이트와 중복되지 않도록 합니다.

5. 사이트에 설명을 적는 <meta name="description"> 태그를 작성합니다.

6. <meta name="description"> 태그 안에 작성한 내용이 다른 사이트와 중복되지 않도록 합니다.

7. <H1> 태그는 한 번만 사용합니다.

8. Alt 속성을 사용해 주세요.

과제 제출 방법

셀프 채점 기준

일일 클래스&학습 도서 리뷰

실습 과제

셀프 채점 기준

'카테고리 없음'의 다른글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31