여행을 좋아하는 편이지만
여행을 준비하는 과정은 늘 번거로웠다.

메모장에 적고,
지도에서 장소 찾고,
노션으로 일정 정리하다 보면
결국 동선이 한눈에 안 보이는 문제가 항상 남았다.

“이걸 한 번에 볼 수 있으면 좋을 텐데…”

그래서 개인적으로 쓰려고
여행 일정 웹앱 하나를 직접 만들어보기로 했다.


기존 여행 일정 정리의 불편함

여행 준비하면서 가장 불편했던 점은 이거였다.

  • 일정은 글로 정리돼 있고
  • 장소는 지도에 흩어져 있고
  • 날짜별 이동 동선은 머릿속으로만 계산해야 하는 것

특히
도쿄 말고 **일본 지방(간사이, 규슈, 홋카이도)**이나
여러 도시를 이동하는 여행에서는
동선이 꼬이면 일정이 바로 무너진다.

그래서 목표를 이렇게 잡았다.

“지도에서 장소를 찍으면
날짜별 여행 일정이 자연스럽게 정리되게 하자”


TripSketch – 내가 쓰려고 만든 여행 일정 정리 도구

이렇게 해서 만든 게 TripSketch다.

기능은 최대한 단순하게 가져갔다.

  • 지도에서 장소 추가
  • 날짜별 일정 정리
  • 전체 여행 일정 한눈에 보기
  • PDF로 저장 및 공유

처음부터
회원 기능, 결제, 추천 같은 건 전부 빼고
‘여행 일정 정리’ 하나만 집중했다.

MVP 단계라 아직 부족한 점도 많지만
최소한 내 여행 준비 스트레스는 확실히 줄어들었다.


기술적으로는 이렇게 만들었다

이번 프로젝트는
1인 개발 + 빠른 MVP가 목표였기 때문에
구조를 최대한 단순하게 가져갔다.

  • 프론트엔드: Cloudflare Pages
  • API / 인증: Cloudflare Workers
  • DB: Cloudflare D1
  • 추후 개발 예정 - 파일 저장 (여행 이미지, 영수증 이미지 등): R2

서버 관리 부담 없이
아이디어를 빠르게 검증하기엔
이 조합이 꽤 잘 맞았다.

물론 OAuth 연동이나
모바일 인앱 브라우저 이슈처럼
생각보다 시간을 많이 잡아먹은 문제들도 있었다.

이 부분은 나중에 따로 정리해볼 생각이다.


실제로 공개하고 느낀 점

서비스를 공개하고 나서 가장 많이 받은 피드백은
기능보다 UX 관련 이야기였다.

  • “이 버튼은 왜 여기 있나요?”
  • “여기서 다음 일정으로 넘어가는 흐름이 어색해요”
  • “PDF에서 지도 비중이 조금 더 있으면 좋겠어요”

개발할 땐 기능만 보였는데,
사용자 입장에서는 흐름이 훨씬 중요하다는 걸 다시 느꼈다.

지금은
실제 사용자 피드백을 반영하면서
UX를 계속 다듬는 단계다.


앞으로의 계획

  • 공유 기능 개선
  • PDF 출력 퀄리티 개선
  • 모바일 UX 보완
  • 일본 지방 / 다도시 여행에 더 잘 맞게 개선

아직 갈 길은 멀지만
내가 실제로 쓰는 도구를 계속 고쳐간다는 느낌이라
개인적으로는 꽤 재미있다.


마무리

이 글은
“서비스 홍보”라기보다는
개인 프로젝트 기록에 가깝다.

혹시 여행 일정 정리할 때
비슷한 불편함을 느껴본 적이 있다면
한 번쯤 참고해봐도 좋을 것 같다.

👉 https://tripsketch.co

피드백은 언제든 환영이다.

 

'Programming > 기타' 카테고리의 다른 글

HMAC SHA-256 암호화 (C#, Javascript, Nodejs)  (2) 2018.08.28
[C#]텔레그램 봇 만들기  (3) 2017.01.05
noVNC  (2) 2017.01.02

2016년 초 블로그를 개설만 해놓고 들여다 보지도 않던때
개발업무를 하면서 구글링을 하다보면 티스토리 블로그가 눈에띄게 많았다.
그리고 글에 붙어있는 광고.

저 광고 뭐지? 애드센스? 돈 좀 되나? 나도 해볼까?

시작은 아무생각 없었다.
그냥 블로그에 복습겸, 취미겸 코딩에 대한 글을 올릴생각 이였고, 광고가 붙으면 뭔가 뿌듯할거 같았다.

그래서 애드센스에 대해 구글링을 하기 시작했다.
쉽게만 생각했던 애드센스는 "애드고사"라는 별명이 있었다.
별생각 없이 블로그를 운영하고 싶었던 나는 글 3개? 정도를 올리고 애드센스 신청을 했고 당연히 거절됐다.
그리고 글이 6개가 되었을때 다시한번 애드센스를 신청했는데...?

됐다.!!!
(승인이 2018년 8월인건 안비밀... 2년 반동안 글 6개 밖에 안올렸다.. ㅋㅋ)

 

"애드고사"라는 말이 무색했다. 무슨원리인지는 모르겠지만 통과한 기쁨에 얼른 광고를 게재해봤고.
내 블로그에 광고가 뜨는게 너무 신기해 5분동안 턱괴고 화면만 보았었다. ㅋㅋㅋ

그리고 현재 1년 반동안 글 6개를 더 게시 하여 총 12개다.
(그냥 심심해서 하는 걸로...)

그렇게 1년 반동안 애드센스 수익은 10.95$

수익을 위해 열심히 글을 올리고 싶은 생각은 없다.
애초에 시작도 호기심과 재미였으며, 복습을 위해서 였다.
그래도 신경안쓰다 어쩌다 한번 보면 1$씩 올라가있는 잔고가 왠지 뿌듯하다..ㅋㅋ

최근 Winform을 이용하여 네이버 카페에 자동으로 글을 등록하는 프로그램을 개발하게 되어 기술과 소스를 공유하고자 작성한다.

 

로그인 / 글쓰기 테스트

 

1. 네이버 자동 로그인

네아로(네이버 아이디로 로그인)을 활용하여 자동 로그인을 구현하려 했다.

Winform의 WebBrowser 혹은 ASP.NET MVC or ASP.NET Webform을 활용하여 네이버 로그인을 구현한 경험은 있지만, WebBrowser없이 로그인을 구현하는 경우는 처음이라 많이 삽질을 했다. 구글에 WebBrowser를 띄우지 않고 로그인하는 방법은 많지 않았고, 있다고 하더라고 POST 패킷 분석 로그인 방법이였다.

 

패킷 분석 로그인 방법은 두 곳을 참조 하였다.

[참조]

- http://non-sponsor.tistory.com/6 (네이버 bvsd 로그인)

- https://it-raccoon.tistory.com/15 (위 코드 기반으로 최신업데이트)

 

 

* bvsd : 네이버 로그인시 전송하는 파라미터의 key이다. 위 [참조] 사이트 들에서는 bvsd를 생성하여 로그인하는 방법을 안내하고 있다. 로그인 성공 이후 Cookie를 저장하여 로그인을 유지한다.

 

위 두 코드를 활용하여 bvsd 로그인 시 OAuth 로그인이 되도록 수정하였다.

할땐 골치 아프더니 다 하고 나니 생각보다 간단

 

1-1. 네이버 로그인 OAuth 구현

보통 네이버 로그인 OAuth 가이드에 따라

[네이버 OAuth 로그인 Url] https://nid.naver.com/oauth2.0/authorize?client_id={client_id}&response_type=code&redirect_uri={callback_url}&state={state} 

경로를 브라우저에 띄워 로그인을 유도한다. 하지만, 원하는건 브라우저 혹은 WebBrowser없이 코드로 로그인을 하는것이다.

 

##

추가적으로 response_type=token으로 할 경우와 code로 할 경우 응답 값이 다르다.

둘 다 로그인 구현은 가능하지만 응답값이 다르다.

token의 경우 응답값으로 Access Token을 받을 수 있으며, Refresh Token을 받을 수 없다.

code의 경우 응답값으로 code와 state를 받아 Access Token과 Refresh Token을 발급 받아야 한다.

##

 

HttpWebRequest로 해당 Url에 bvsd와 OAuth 파라미터를 추가하여 로그인 시도를 한다.

* logintp=oauth2, url=https://nid.naver.com/oauth2.0/authorize?client_id={client_id}&response_type=code&redirect_uri={callback_url}&state={state}을 넣어주면된다.

추가적으로, svctype, smart_LEVEL은 PC마다 다르게 나올수도 있다. 해당값을 바꿔줘야 하는지는 잘 모르겠다.

위 이미지의 파란박스가 bvsd이다.

 

소스에서는 위와 같이 작성되어 있다.

 

이렇게 해주면 bvsd를 활용하여 OAuth 로그인을 성공할 수 있다.

이후 작업은 OAuth 로직에 맞춰 진행되며, 위에서 언급한 code와 state로 Access Token과 Refresh Token을 발급 받아 네이버 API 이용할 수 있다.

 

Refesh Token을 저장하여 추후 ID, PW입력없이 API 사용이 가능하다.

 

1-2. 카페 API 사용

소스는 네이버 개발자 카페 글쓰기 명세에서 그대로 가져와서 썼다.

아주 친절하게 잘 작성되어있다.

 

카페 글쓰기 API 사용시 ClubID와 MenuID를 알아야 글을 작성 할 수 있다.

ClubID와 MenuID는 카페 메뉴에서 오른쪽 클릭 후 "새 창에서 열기" or "새 탭에서 열기"를 하면 확인 가능하다.

https://cafe.naver.com/블라블라?iframe_url=/ArticleList.nhn%3Fsearch.clubid=카페아이디%26search.menuid=메뉴아이디%26search.boardtype=L

 

 

textbox에 미리 값을 채워서 사용해주세요. (안그럼 먹통 인건 안비밀)

 

 

// 급하게 해서 소스가 더러워도 이해해주세여ㅠㅠ

NaverCafeTest.zip
0.02MB

'Programming > C#' 카테고리의 다른 글

[C#]ini file 사용법 & 소스 공유  (5) 2017.01.03
[C#]Log4Net 사용법  (0) 2017.01.03
[C#]Snappy 사용법  (5) 2016.12.30
[C#]DataTable Sorting 간단 사용법  (0) 2016.12.30

+ Recent posts