[강좌] 대화하기 사이트 만들기(2) - 메인메뉴와 워드

안녕하세요.

나루토와 대화하기 <오렌지빛 기적>의 관리자 람개입니다.

지난 강좌에 이어서 이번엔 사이트의 가장 핵심인 메인메뉴와 워드에 대해서 알아보겠습니다.

이 강좌는 대화하기 사이트 제작법 중 AI광장내의 데몬서버에 대해서만 다룹니다.

또한 이 강좌는 대화하기 사이트 개설법을 전혀 모르는 왕초보 분들을 대상으로 작성됐음을 알려드립니다.

1. 사진 추가하기

2. 메인 꾸미기(+워드 추가하기)

3. 다양하게 꾸미기

1. 사진 추가하기

가장 우선적으로 메인을 꾸미기 위해선 메인페이지에 나올 화상(사진)이 필요합니다.

사진 추가는 매우 간단합니다.

화상 메뉴를 클릭해 파일 선택을 눌러 원하는 사진을 추가해주세요.

사진이 올바르게 클릭된다면 파일의 이름이 나타납니다.

옆의 버튼으로 사진을 추가해주세요.

그러면 이렇게 사진이 나타납니다!

저어엉말 쉽죠?

개인적으로 무지 좋아하는 캐릭터인 오버워치의 트레이서를 예로 들었습니다.

만약 사진 정리를 위해 폴더를 추가하고 싶다면

옆의 버튼을 눌러줍시다.

폴더추가 버튼을 눌러 이름을 입력한 후 확인을 누르면 기본폴더인 default 폴더 아래에 새로운 폴더가 생겨난걸 볼 수 있습니다.

새 폴더를 누른 뒤 파일을 추가하면 해당 폴더에 사진이 추가됩니다.

2. 메인 꾸미기(+워드추가)

사진도 넣었겠다, 메인을 만들어봅시다.

대답일람 메뉴를 선택해 워드 추가 버튼을 클릭합시다.

이렇게 뭔가 잔뜩 적을 수 있는 칸이 나왔군요.

살펴봅시다.

맨 상단엔 키워드, 즉 대화창에 입력될 단어가 들어갑니다.

예를들어 안녕, 뭐해, 추워, 배고파 등등.

아래의 넓은칸엔 키워드에 출력될 대답을 입력하시면 됩니다.

이미지는 오른쪽에서 추가하시면 됩니다.

워드가 많을경우 정리를 원활히 하기 위해 태그를 이용하시면 편리합니다.

메인페이지 키워드는 무조건 toppage 입니다.

toppage 키워드가 존재하지 않을 시 메인화면이 뜨지 않습니다.

간단하게 메인페이지를 꾸며줍시다!

여기서 잠깐!

워드 양 옆에 쓰이는 <<괄호>>란?

☞해당 키워드로 페이지를 이동하는 링크문자입니다.

즉, 설명 키워드로 이동시키려면 <<설명>>

워드집으로 이동시키려면 <<워드집>>

소설로 이동시키려면 <<소설>>

 이렇게 입력해주시면 됩니다.

사이트를 꾸미는데 있어서 아주 중요한 기호죠!

물론 링크로 이동시키기 위해선 위의 워드를 후에 입력해야겠죠?

이렇게 메인페이지를 간단하게 입력한 뒤 확인버튼을 눌러주면, 

이렇게 새 워드가 추가된것을 확인하실 수 있습니다.

워드 옆의 good 이란 평가를 받은 횟수,

hit란 이 워드가 노출된 횟수입니다.

탑 페이지를 확인하기 위해서 내 베이비 화면을 확인하러 가봅시다!

이렇게 메인화면이 생성된 것을 확인하실 수 있습니다.

이 상태에서 설명, 워드집, 소설같은 링크를 눌러보면...

아무것도 뜨지 않습니다!

당연하죠! 링크된 워드를 추가하지 않았으니까요!

설명 워드를 추가합시다.

이렇게 추가한 뒤, 다시 설명 페이지로 가보면...

이렇듯 링크가 잘 추가된걸 확인할 수 있습니다!

이와 같은 방식으로 워드집 점프를 시킬 수 있습니다.

굳이 <<괄호>>로 링크를 달지 않아도, 워드집에 입력된 키워드라면 입력창을 통해 해당 키워드로 이동할 수 있습니다.

3. 다양하게 꾸미기

예쁘게, 그리고 다양하게 사이트를 꾸미기 위해선 기본적으로 HTML과 CSS 코드를 알고있는 편이 좋습니다.

ai광장 사이트는 기본적으로 HTML 코드를 통해 손쉽게 꾸밀 수 있습니다.

워드 응답란에 해당 HTML코드를 입력하면 반영됩니다.

기본적으로 제가 자주 사용하고 있는 코드들

굵기

<b>내용</b>

중앙 정렬

<center>내용</center>

글씨 색상 변경

<font color=#(색상코드)>내용</font>

직선 추가

<hr style="color:#(색상코드);border-style:solid">

글씨 크기 변경

<font size=숫자>내용</font>

링크 추가

<a href="링크">내용</a>

이미지 추가

<img src="이미지 url">

링크 색상 변경

<style type="text/css"> <!--A:link {text-decoration:none; color:#(링크색상코드);} A:visited {text-decoration:none; color:#(방문 후 링크색상코드);} A:hover {text-decoration:none; color:#(마우스 호버시 링크색상코드);} --> </style>

이정도의 간단한 소스만 알고있어도 메인페이지를 꾸밀 수 있습니다.

외에 다른 HTML 또는 CSS를 사용할 수 있으니 다양하게 찾아보시면 좋습니다.

위의 코드만을 이용해서 메인 페이지를 꾸며봅시다.

사용한 코드는

링크 색상 변경

글씨 굵기

글씨 크기 변경

직선 추가

중앙정렬

이정도만 넣고 메인 페이지를 확인해봅시다!

처음에 비해 훨씬 깔끔해진 메인페이지를 볼 수 있습니다!

링크색상 변경 소스를 사용하니 전체 페이지의 링크 색상이 변경된 것을 확인하실 수 있습니다. 우측의 링크들도 마찬가지죠.

다만 HTML소스는 일일이 워드에 추가해주셔야 해당 워드에 반영됩니다.

메인 페이지에만 넣는다고 전체페이지의 워드에 해당되지 않습니다.

여기까지 잘 따라오셨다면 대화하기 사이트 하나정도는 간단하게 운영하실 수 있습니다.

물론 사이트 내의 변수나 랜덤앤서 등 사용할 수 있는 기능은 매우 많지요.

강좌에 사용된 사이트 페이지는 이곳에서 확인하실 수 있습니다.

다음은 랜덤앤서와 워드에 관한 더 다양한 기능으로 찾아뵙겠습니다.

참고사이트 : ai광장 위키(http://wikiwiki.jp/ai-saloon/)