사무소 홈페이지 만들기 교재

10개 절

• 사무소 홈페이지에 무엇이 있어야 하는지 근 거를 가지고 정하게 됩니다.
• 남의 사이트를 뜯어보고 구조를 읽어 내게 됩니다.
• 만들 화면을 종이에 그려 놓게 됩니다.
• 첫 화면에 들어갈 한 문장을 손에 쥐 게 됩니다.
• 시작하기 전에
• 왜 직접 만드나
• 사무소 홈페이지에 무엇이 있어야 하나
• 남의 사이트를 뜯어봅니다
• 첫 문장을 정합니다
• 무엇을 준비해 두어야 하나
• 도구를 어떻게 쓸 것인가
• 방문자가 어떻게 움 직이는지
• 화면에 쓰는 문구의 원칙
• 사무소의 성격을 정합니다

두시간 · 10개 절

• Git이 무엇을 해 주는지 알고 설치하게 됩니다.
• 작업 폴더를 만들고 되돌릴 수 있는 상태로 만듭니다.
• 코드를 다룰 때 문서와 무엇이 다른지 알게 됩니다.
• 시작하기 전에
• 터미널부터
• Node 설치
• Git 설치
• 작업 폴더 만들기
• 코드를 다룬다는 것
• 규칙 파일 만들기
• 실습
• 오작동 사례와 대처
• 어디까지 왔는지

세시간 · 10개 절

• 1차시에서 정한 내용이 화면에 들어갑니다.
• 어느 파일을 고치면 무엇이 바뀌는지 알게 됩니다.
• 휴대전화 크기로 확인하는 법을 익힙니다.
• 고치고 바로 확인하는 흐름이 손에 붙습니다.
• 시작하기 전에
• 뼈대 만들기
• 화면 띄우기
• 화면 구조 이해하기
• 홈 화면 만들기
• 화면 더 만들기
• 휴대전화에서 확인하기
• 손보기
• 만들면서 고치기
• 실습

세시간 · 10개 절

• GitHub에 코드가 올라갑니다.
• 남이 볼 수 있는 주소가 생깁니다.
• 고치면 자동으로 다시 올라갑니다.
• 잘못 올렸을 때 되돌릴 수 있습니다.
• 비용부터 셉니다
• 배포가 무엇인가
• GitHub 가입과 저장소 만들기
• 배포처 연결하기
• 도메인 붙이기
• 되돌리기
• 공개된 것의 무게
• 매달 확인할 것
• 다른 방법들
• 실습

세시간 · 10개 절

• Neon에 계정과 프로 젝 트가 생깁니다.
• 비 밀 번호를 안전하게 다루는 법이 손에 붙습니다.
• 표를 하나 만들고 자료를 넣어 보십니다.
• 담긴 것을 눈으로 확인하실 수 있습니다.
• 시작하기 전에
• 왜 데이터베이스가 필요한가
• Neon 가입과 프로 젝 트 만들기
• 비 밀 번호를 다루는 법
• 표를 만든다는 것
• 연결해서 확인하기
• 담긴 것을 보는 법
• 실습
• 오작동 사례와 대처
• 어디까지 왔는지

10개 절

• 남긴 것이 데이터베이스에 담깁니다.
• 신청이 들어오면 메일로 알림이 옵니다.
• 들어온 것을 화면에서 볼 수 있습니다.
• 개인정보 처리방침 페이지가 생깁니다.
• 시작하기 전에
• 무엇을 받을 것인가
• 개인정보 처리방침
• 폼 만들기
• 받은 것을 담기
• 알림 메일 붙이기
• 관리자 화면
• 스 팸 과 오남용 막기
• 실습
• 오작동 사례와 대처

두시간 · 10개 절

• 사례 목록 화면과 개별 글 화면이 생깁니다.
• 분야별로 나눠 볼 수 있게 됩니다.
• 글 아래에 상담 신청 단추가 붙습니다.
• 실제 사건을 각색하는 법을 알게 됩니다.
• 시작하기 전에
• 무엇을 쓸 것인가
• 사례를 쓸 때의 위험
• 글을 어디에 담나
• 목록 화면 만들기
• 글 화면 만들기
• 분류와 검색
• 한 달에 한 편 쓰는 법
• 실습
• 오작동 사례와 대처

세시간 · 10개 절

• 검색 엔 진에 사이트를 등록합니다.
• 사무소 정보를 기계가 읽을 수 있게 표시합니다.
• AI가 답할 때 우리를 인용하도록 준비합니다.
• 무엇이 되고 있는지 확인하는 법을 익힙니다.
• 시작하기 전에
• 검색 결과에 무엇이 나오나
• 검색 엔 진에게 알리기
• 사무소 정보를 기계가 읽게 하기
• 사업자 정보 표시
• 오시는 길 마무리
• AI가 읽게 하기
• llms.txt 와 크 롤 러 설정
• 무엇이 되고 있는지 보기
• 실습