쏙쏙 팀과 띄움 서비스의 홍보를 위해 필요한, 특히 토크쇼 <비행기모드>에서 오픈채팅방에 입장하기 위한 문턱으로 쓰일 랜딩페이지를 개발한다.
내일 있을 UNIS 최종데모데이에서 이 랜딩페이지의 개발현황을 공유할 것이므로, 오늘 오전까지 백엔드 개발을 완료하여 발표팀에게 넘겨주어야 한다.
깃허브 레포지토리
https://github.com/00blowup/SoakSoak_Lading_1
GitHub - 00blowup/SoakSoak_Lading_1: 2023.02.03~ 홍보 및 토크쇼 진행을 위한 랜딩페이지 개발
2023.02.03~ 홍보 및 토크쇼 진행을 위한 랜딩페이지 개발. Contribute to 00blowup/SoakSoak_Lading_1 development by creating an account on GitHub.
github.com
요구사항
쏙쏙 팀 회의를 통해, 랜딩페이지에 꼭 들어가야 하는 필수 기능을 다음과 같이 합의했다.
- 쏙쏙의 각종 SNS로 바로가는 버튼
- 쏙쏙 카카오톡 채널 친구추가 기능
- 토크쇼 당시 오픈채팅방으로 바로가는 버튼
화면구성
위의 세 가지 기능을 구현하기 위해 필요한 화면은 다음과 같다.
1. 메인화면
쏙쏙 카카오톡 채널 친구추가, 토크쇼 오픈채팅방 바로가기 버튼이 표시된다.
아래의 footer에는 쏙쏙의 각종 SNS (인스타그램, 노션, 트위터)로 바로가는 버튼이 가로로 나열된다.
쏙쏙 카카오톡 채널 친구추가 버튼은 2번 화면으로 연결되고,
오픈채팅방 바로가기 버튼은 오픈채팅방 주소로 링크되어있다.
2. 쏙쏙 카카오톡 채널 친구추가 페이지
메인화면에서 쏙쏙 카카오톡 채널 친구추가 버튼을 누르면, 카카오톡 채널 API가 제공하는 친구추가 연결 페이지를 화면에 표시한다.
https://developers.kakao.com/docs/latest/ko/kakaotalk-channel/common#api-list
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
프로젝트 생성
start.spring.io 에서 다음과 같이 새 프로젝트를 생성한다.
컨트롤러 구현
해당 랜딩페이지에서는 클라이언트가 특정 화면을 보고 특정 링크로 이동하는 행동 외에 아무것도 하지 않기 때문에, html 파일을 잘 작성하고 각 html 파일을 올바른 url에 연결하기만 하면 개발이 완료된다.
src>main>java>soaksoak.landing 아래에 controller라는 패키지를 만들고 그 안에 MainController라는 클래스를 생성한다.
클래스의 내용은 아래와 같이 채운다.
package soaksoak.landing.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MainController {
@GetMapping("/")
public String main(){
return "main";
}
@GetMapping("/kakao")
public String kakao(){
return "kakao";
}
}
두 개의 페이지에 각각 url을 할당(mapping)하는 코드이다.
html 파일 작성
다음으로, 위에서 mapping해준 대로 "/"과 "/kakao/"에 접속하였을 때 표시될 mail.html 과 kakao.html 을 작성한다.
디자인팀이 최종데모데이 이후에 참여할 예정이므로, 매우 기본적인 수준의 디자인을 적용한다.
아직 쏙쏙의 카카오 채널이 개설되지 않았으므로, kakao.html에 API를 적용할 수 없는 상황이다. 이 페이지에 카카오 채널 추가 기능이 들어올 것이라는 문구만 남기기로 한다.
src>main>resources>templates 폴더 안에 main.html과 kakao.html 파일을 새로 만든다.
코드는 아래와 같이 채운다.
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main</title>
</head>
<body>
<div id="container">
<div class="vlist">
<div class="item" onclick="location.href = '/kakao'">
SOAKSOAK 카카오톡 채널 친구추가하기
</div>
<div class="item" onclick="location.href = 'https://open.kakao.com/o/gEpu6o1e'">
비행기모드 토크쇼 오픈채팅방 바로가기
</div>
</div>
</div>
<div class="footer">
<div class="hlist">
<div class="social" onclick="location.href = 'https://www.instagram.com/soaksoak_official/'">
인스타그램
</div>
<div class="social" onclick="location.href = 'https://www.notion.so/soaksoakofficial/SOAK-SOAK-ab9c0440b2dd4d68982b1cde551190bf'">
노션
</div>
<div class="social">
트위터
</div>
</div>
</div>
</body>
</html>
kakao.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>카카오채널 친구추가</title>
</head>
<body>
<div id="container">
<p>쏙쏙 카카오톡 채널 친구추가 API가 추가될 페이지입니다</p>
</div>
<div class="footer">
<div class="hlist">
<div class="social" onclick="location.href = 'https://www.instagram.com/soaksoak_official/'">
인스타그램
</div>
<div class="social" onclick="location.href = 'https://www.notion.so/soaksoakofficial/SOAK-SOAK-ab9c0440b2dd4d68982b1cde551190bf'">
노션
</div>
<div class="social">
트위터
</div>
</div>
</div>
</body>
</html>
트위터 계정이 아직 개설되지 않았기 때문에 트위터에는 onclick 속성을 추가하지 않았다.
실행해보면 다음과 같다.
CSS 작성
여기까지만 해도 필수 요소들은 모두 완성되었지만,
데모데이에서 화면 캡처를 보여줄 것이기 때문에 기본적인 디자인 정도는 갖추는 게 좋아보인다.
기본적인 CSS를 작성해주자.
container ID에 CSS를 적용하여 요소들이 적절한 비율로 화면 가운데에 위치하도록 한다.
vlist 클래스에 CSS를 적용하여 세로 리스트에 적절한 여백을 부여한다.
item 클래스에 CSS를 적용하여 세로 리스트의 각 아이템이 적절한 크기와 여백을 갖도록 한다.
hlist 클래스에 CSS를 적용하여 가로 리스트의 자식들이 가로로 정렬되도록 하고 적절한 여백을 부여한다.
social 클래스에 CSS를 적용하여 SNS 바로가기 버튼들이 적절한 크기와 여백을 갖도록 한다.
src>main>resources>static 아래에 css라는 폴더를 만들고 그 안에 styles.css라는 파일을 생성한다.
각 html 파일의 헤드 안에는 이 파일과의 link를 추가해준다.
<link rel="stylesheet" href="/css/styles.css"/>스프링 부트에서는 resources/static까지를 기본 경로로 인식하므로 static 이하의 경로부터 적어준다.
styles.css의 내용은 다음과 같이 채운다.
#container {
width:80%;
padding:30% 10%;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
}
.vlist {
width:100%;
height:100%;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
}
.hlist {
display:flex;
justify-content:center;
align-items:center;
padding:10%;
}
.item {
border: 1px black solid;
padding:10px;
}
.social {
border: 1px black solid;
padding:10px;
}
실행시켜보면 다음과 같다.
일단 여기까지의 진행상황을 팀원들과 공유해보고,
아무래도 너무 디자인이 미흡하다는 피드백이 돌아오면 좀 더 보기 좋게 꾸미도록 하겠다.
팀원들의 피드백을 받아, 디자인을 조금 발전시켰다.
총 개발 시간은 2시간 정도가 소요되었다.