인터페이스 겨울방학 프로젝트

인터페이스 동아리 홈페이지

방학을 알차게 보낼방법은 없을까 생각해보다가 지금까지 전설로만 존재 했다던 인터페이스 동아리 홈페이지 제작을 계획하게 되었습니다.

참여부원

17학번 강동민 전자정보통신공학과
17학번 김진성 지능기전공학부
17학번 박나영 컴퓨터공학과
17학번 이동엽 컴퓨터공학과
17학번 이경은 생명시스템공학과
17학번 오경식 지능기전공학부

사용언어

HTML + JS(Java Script) + CSS를 이용한 반응형 웹(Response Web)을 제작할 예정입니다.
기존의 오픈소스(Bootstrap) 템플릿을 이용하여 기본적인 HTML,CSS 지식으로도 제작이 가능하도록 할 계획입니다.

개발환경 (Brackets Editor)

A modern, open source text editor that understands web design. (brakets.io)

이번 프로젝트의 개발환경은 bracket을 사용하려고 합니다.
bracket는 adobe에서 만든 오픈소스 에디터로 html, css 코딩을 하는데 최적화된 좋은 도구입니다.

Download link is here.

• [Brackets Editor의 사용법은 오픈소스 템플릿을 다운받은 다음 에디터에서 파일을 연다음 Index.html을 열고

좌측 상단에 번개표시를 누르면 실시간으로 확인할수 있는 웹페이지가 뜨게 됩니다.

위에 사진처럼 뜬다면 성공!

개발단계

1. 회의는 디스코드로 진행합니다.(절대 방학에 밖에 나가기 싫어서 그런건 아님)

2. 사용하는 언어는 HTML, CSS, Java Script를 이용한 반응형 웹(Response Web)

3. 사용하는 개발툴은 Brackets (코딩할때 실시간으로 변경사항들을 바로바로 보여준다.)

4. 기존의 오픈소스 템플릿을 수정하는 방향으로 진행(시간 단축을 위해)

때문에 언어에 깊은 이해 필요 x

5. 목적은 동아리 홍보 + 게시판 기능

6. 최종 목표는 홈페이지 제작후 세종대학교 전산실에 있는 서버룸에 입주하는 것

세종대학교 서버룸에 입주하면 *****.sejong.ac.kr 이라는 도메인이 주어지기 때문에 동아리를 홍보하기에 편합니다. (제일좋은건 도메인이 무료라는점)

7. 현재는 interface518.dothome.co.kr 이라는 개인 도메인 사용중 (27기 김용우 선배님 제공)

8. 현재는 riyenas0925.github.io를 사용하여 웹페이지 운용중

9. 현재는 동아리에서 구입한 도메인인 www.interface.or.kr 이라는 도메인 사용중

개발 순서

• 1. Github 설치및 소스트리 설치 - interface_homepage repository 주소

아래 예제 및 강의에 Git 설치및 Sourcetree 연동 방법 참고

• 2. Brakets 설치후 HTML 소스 테스트 해보기 - Hello World! 띄우기

아래 예제 및 강의에 생활코딩 WEBn 강의 참고

• 3. 오픈소스 템플릿(BootStrap)을 이용하여 홈페이지 제작

오픈소스 템플릿(HTML + CSS + JavaScript) 사용(Response Web)

• 4. 서버 게시판 DB생성 및 홈페이지와 서버 연결

PHP 사용하여 데이터베이스 연동

예제 및 강의

• 생활코딩 WEBn 강의
• 생활코딩 HTML 강의

유명한 코딩강의 사이트인 생활코딩에서 제공하는 Web 강의 입니다.

• 참고할만한 교내 웹페이지

세종대학교의 정보보안동아리인 SSG(Sejong Security Guard)의 공식 홈페이지 입니다.

• test 웹 페이지

현재 저희 동아리에서 사용하고 있는 도메인 주소 입니다.

• Git 설치및 Sourcetree 연동 방법

깃허브는 소스코드 버젼 관리 및 협업 프로그램 입니다. 원래는 git bash를 이용해 사용해야하지만 여기서는 Sourcetree를 사용합니다.