Orangesea - developer

모바일 식권 서비스 만들기(3) - UI 디자인(Building a Mobile coupon for meal - UI design) 모바일 식권 서비스 만들기(3) - UI 디자인(Building a Mobile coupon for meal - UI design) 오븐 앱 툴로 UI 디자인을 해봤다. 먼저 식권 구매자가 사용하는 UI. 메인 페이지. 메뉴 페이지 수량설정 및 구매 페이지 결제 후 완료페이지 모바일 식권 페이지 여기까지 기본적인 구매자가 필요한 UI 페이지. 다음으로는 관리자가 필요한 UI 페이지 관리자_메인페이지 관리자_메인페이지(로그인 후) 사이드바 UI 메뉴 등록 페이지 메뉴 상세 페이지 일단 기본적으로 이렇게 UI 디자인을 한 이후에 DB를 짜봐야겠다.

온라인 마케팅 공부(2) - 서비스의 고객은 누구인가(Who is the customer of the service) 온라인 마케팅 공부(2) - 서비스의 고객은 누구인가(Who is the customer of the service) 먼저 첫 번째 나의 서비스에 관심있어할, 서비스의 타겟 고객이 누구인가를 파악하고 고객은 어떠한 사람인가에 대해 파악한다. 를 해보자. 내가 진담 서비스를 처음 기획하면서 썼던 글을 참고해보면( https://ghkdgh2365.blogspot.kr/2018/01/welcome-file.html ) 그 때 내가 설정한 진담의 타겟 고객은 20세~29세 인 성인 남녀가 타겟 고객. 기존 사진, 외모 위주의 데이팅 앱에 염증을 느끼는 , 보다 진정성 있는 데이팅 앱을 사용하고싶은 20대 성인 남녀. 이성친구를 만들고 싶은, 외로운 솔로 . 지금 보니 뭔가 상당히 추상적이고 넓게 느껴지는 감이 없잖아 있다. 그럼 한번 내가 이 앱으로 고객에게 주고자 하는 가치를 다시 꺼내보자 사진없이 만나는 기대감, 진정성 있는 만남. 음… 약간 대충 썼던 감이 보인다. 하하… 그럼 다시 한 번 생각해보자. 내가 생각하는 진담은 이랬으면 좋겠다. 상대방을 만날 때 외모를 보지 않고 만날 수 있는 통로가 되면 좋겠다. 물론 외모 중요하다. 나도 외모를 본다. 하지만 외모보다 더 중요한 것이 그 사람의 가치관과 성격이다. 그래서 그 사람의 가치관, 성격을 먼저 보고 그 다음 외모를 볼 수 있는 통로가 되면 좋겠다. 라는 생각에서 서비스를 기획한 것이다. 나의 가치관과 성격을 보여준다. 상대방의 가치관과 성격을 파악한다. 상대방의 가치관과 성격, 기본적인 정보가 마음에 든다면 서로 연결하여 얘기해보고, 만나보고 그 단계에서 외모를 본다면 조금 더 진정성 있는 만남이 되지 않을까. 사진보고 만나고 싶다면 다른 앱 많아요 :) 여기선 먼저 상대방이 적어놓은 이야기를 들어보아요. 그리고 선택하세요 !...

즐겨찾기 사이트 모음 및 관리 서비스 만들기(1) - (Building a favorite site management service) 즐겨찾기 사이트 모음 및 관리 서비스 만들기(1) - (Building a favorite site management service) 요즘 매일매일 들어가야하는 사이트가 많아졌는데 즐겨찾기에다가 저장해놔도 맨 아래에 있고 아무튼 뭔가 불편하다고 생각이 들었음. 그래서 즐겨찾기 사이트를 모아놓고 관리할 수 있는 사이트를 만들어야겠다고 생각을 해서 급하게 만들게 됨. 근데 만들려고 생각해보니까 로그인을 해야하는 문제가 있긴 한데 , , , 음 이건 아이디랑 비밀번호를 저장해놓으면 되지 않을까라는 생각이 듬. . 아무튼 머리 속에 있는 걸 빠르게 만들기로 , , , 간단한 사이트니까 기획없이 하려다가 그냥 잠깐 적고 가는게 좋겠다 생각이 듬. Q. 왜 만들어야하는가, 왜 이 서비스를 이용해야하는가? A. 현재 브라우저에 있는 즐겨찾기 서비스가 불편함. 찾는 것이 어려움. 끝. 1시간 안에 만드는 것이 목표.

만남(미팅, 소개팅) 서비스 만들기(1) - (Building a new dating service, meeting service) 만남(미팅, 소개팅) 서비스 만들기(1) - (Building a new dating service, meeting service) 이게 인기가 있을지는 모르겠지만 어차피 재미로 만드는거니까. 얼굴 사진이 없는 소개팅 서비스를 만들려고 한다. 얼굴 사진 없이 그 사람을 잘 드러낼 수 있는 정보만 보고 선택하게 된다면 조금 더 진정성이 있지 않을까 해서 만들어보는 것이다. 그럼 기획이라고 하긴 허접하지만 간략하게 기획을 해보려고한다. Q. 사람들은 왜 이 서비스를 이용해야 하는가? A. 음 … 어려운 질문이다 … 이 대답을 위해서는 왜 이 서비스를 만드려고 했는지에 대해 이야기하는 것이 좋을 것 같다. 데이팅 앱을 한 번 만들어보려고 해서 그동안 데이팅 앱에 대한 후기 및 문제점에 대해서 조사를 했다. 그리고 가장 많이 불평(?), 불만이 있던 부분이 사진만 보고 스킵해버리는 것이 불만이라는 부분과 진정성이 없고 양다리, 문어다리를 걸치는 사람이 많다라는 것이 불만과 문제점으로 많이 나왔다. 그래서 사진만 보고 걸러지는 앱에 신물이 난다면, 진정성있게 둘만의 만남을 가지고싶다면, 이 서비스를 이용해봄직하다. Q. 고객은 어떤 사람인가? A. 20세~29세인 성인 남녀가 타겟 고객. 기존 사진, 외모 위주의 데이팅 앱에 염증을 느끼는, 보다 진정성 있는 데이팅 앱을 사용하고싶은 20대 성인 남녀. 이성친구를 만들고 싶은, 외로운 솔로. Q. 시장 규모 및 전망은? A. -소셜 데이팅 앱 국내 시장 규모 2016년 700억 -국내 유저 월 평균 결제 정보 1인당 18,400원/월 개월당 10%~25% 구매전환율 -국내 유저 소셜 데이팅 앱 사용 현황 25세~44세 미혼 인구 약 600만명(2015년 기준) 가입자 약 300만명 예를 들어 월 방문자가 10...

온라인 마케팅 공부(1) - 온라인 마케팅은 어떻게 해야할까(How to do online marketing) 온라인 마케팅 공부(1) - 온라인 마케팅은 어떻게 해야할까(How to do online marketing) 지금 작업 중인 진담(데이팅 서비스)에 대한 마케팅을 어떻게 해야하나 고민 끝에 온라인 마케팅을 배워서 해보기로 결정했다. 근데 온라인 마케팅에 대해 매우 무지하다. 그래서 한번 내 나름대로 자료를 찾아서 정리한 후에 가볍게 온라인 마케팅을 시도해보려고한다. 일단 많은 자료들을 훑어보고 난 결론은 나의 서비스에 관심있어할, 서비스의 타겟 고객이 누구인가를 파악하고 고객 은 어떠한 사람인가에 대해 파악 한다. 그 고객이 자주 이용하는 채널을 파악한다. 그 고객이 필요한, 관심있어 할 콘텐츠 를 채널의 성격에 맞게 만들어 배포한다. 콘텐츠에서 서비스로, 콘텐츠에서 이메일로, 이메일에서 서비스로 고객을 자연스럽게 이동 시킬 수 있게 만든다. 검색엔진최적화(SEO) 는 기본, 검색 유입을 높이기 위한 포스팅은 필수 ! 잠깐의 시간으로 많은 양의 정보를 정리한 내용은 이러했다. 맞는지 안맞는지 사실 잘 모르겠고 맞다고 하더라도 말이 쉽지 저 부분을 정확하게 수행할 수 있을지 모르겠다. 이래도 저래도 모르겠으니 일단 진담이 필요할, 진담에 관심이 있을 만한, 진담이 줄 수 있는 가치에 만족할 만한 고객을 찾는 것부터 시작해야겠다.

모바일 식권 서비스 만들기(2) - Usecase diagram(Building a Mobile coupon for meal - Usecase diagram) 모바일 식권 서비스 만들기(2) - Usecase diagram(Building a Mobile coupon for meal - design) 시나리오를 바탕으로 Usecase diagram 을 간단하게 만들어보았다. 식권을 사는 구매자, 관리자로 나누어 만들었다. 로그인에 대한 것을 생각했는데 로그인을 하면 귀찮아할 것 같아서 일단은 없이 가고 필요하면 만들까 고민을 하고 있다. 아니면 일단 로그인은 만들고 권한만 없앨까 생각도 하고 있다.

즐겨찾기 사이트 모음 및 관리 서비스 만들기(3) - 크롬 확장프로그램 만들기2 (Building a favorite site management service - Building Chrome extension 2) 즐겨찾기 사이트 모음 및 관리 서비스 만들기(3) - 크롬 확장프로그램 만들기2 (Building a favorite site management service - Building Chrome extension 2) 개발을 하려고 하는데 생각보다 즐겨찾기에 대한 솔루션이 많이 있어서 일단 간단하게 마무리하고 조금 더 여유가 생기면 추가적으로 개발을 해보려고 한다. 간단하게 검색만 되는 기능을 만들어보았다. 이것도 내가 만든건 아니고 소스 복붙이라 내가 한 건 크게 없다. 여기서 대,소문자 구분 없이 검색하는 방법을 조금 더 생각해보는게 첫 번째 숙제다. 일단 manifest.json 은 이렇게 작성해준다. { "manifest_version" : 2 , "content_security_policy" : "script-src 'self' https://ajax.googleapis.com; object-src 'self'" , "name" : "Awesome Bookmark Manager" , "description" : "You can easily find bookmark that you want to go by using this program ! " , "version" : "1.0" , "browser_action" : { "default_title" : "ABM...

모바일 식권 서비스 만들기(1) - 기획(Building a Mobile coupon for meal - design) 모바일 식권 서비스 만들기(1) - 기획(Building a Mobile coupon for meal - design) 페이스북에서 식권대장의 서비스를 보았다. 예전부터 한 번 만들어보고싶은 서비스였는데, 이 참에 한 번 간단한 버전으로 만들어보면 어떨까 생각이 들어서 실행에 옮기기로 했다. 간단하게 왜 만들어야하는지만 생각해보고 다음으로 넘어가려고 한다. Q. 이게 왜 필요한가, 왜 이것을 사용해야만하는가 내가 학식을 먹고 싶을 때 줄을 기다리지 않고 바로 사먹으려고. 학식 관리자가 남은 수량을 체크해 빠르고 정확하게 품절에 대한 공지를 내릴 수 있게하려고. Q. 그럼 고객에게 주는 가치는 무엇인가 먹고싶을 때 줄을 서지 않고 사고 바로 가서 먹는다 = 시간 절약 샀는데 품절이 나는 현상을 관리자, 소비자 모두 겪지 않을 수 있다. = 고객 불만 해소 유저 시나리오는 다음과 같다. 사먹는 사람(이하 소비자)는 오늘 학식 메뉴가 뭔지 궁금해한다. 오늘의 학식 메뉴를 확인한다. (식당마다) 메뉴를 결정했으면 해당 메뉴에 대한 구매 버튼을 누른다. 수량을 설정하고 (가격이 수량에 따라 나오고) 결제를 한다. 결제가 완료되면 모바일 식권이 발급된다. 식당 관계자(이하 관리자)는 메뉴를 입력한다. (식당마다) 판매를 시작하고 판매를 중지할 권한을 갖는다. 이 때 권한은 크게 일시정지, 총 수량 입력 형태로 갖는다. 결제 내역, 판매 내역에 대한 정보를 확인할 수 있다. 환불과 교환이 필요한 지는 잘 모르겠다. 일단 없다고 치고 위와 같은 시나리오를 바탕으로 UML과 UI를 만들어야겠다.

Visual Studio CODE(VS CODE) 설치, 사용하는 방법 Visual Studio CODE(VS CODE) 설치, 사용하는 방법 크롬 확장프로그램을 만들려고 하는데 C9 으로는 좀 하기 어려워서 로컬 개발을 해야겠다라는 생각을 했다. 로컬 개발하기 위해서 텍스트 편집기가 필요한데 무엇을 할까 찾아보다 한 블로그에서 가장 가볍다고 추천하는 Visual Studio CODE 를 써보기로 하였다. https://code.visualstudio.com/ 여기로 들어가서 각자의 운영체제에 맞게 다운로드를 받아 설치를 하면 된다. 설치 방법은 매우 간단하다. 그냥 계속 클릭 , , 그 다음 다 받았으면 실행하자. 그러면 이런 화면이 나온다. 그러면 작업할 폴더를 만들어준다. 위치는 상관없다. 나는 일단 바탕화면에 만들었다. 그리고 작업영역 폴더 추가를 한다. 파일 버튼을 눌러서 들어가도 되고 메인에 있는 걸 클릭해도 된다. 다음 아까 만들었던 폴더를 찾아가 설정하고 추가를 누른다. 그 다음 만든 폴더를 오른쪽 클릭해서 새 파일을 눌러서 작업을 하면 된다 ! 끝 !

즐겨찾기 사이트 모음 및 관리 서비스 만들기(3) - 크롬 확장프로그램 만들기1 (Building a favorite site management service - Building Chrome extension 1) 즐겨찾기 사이트 모음 및 관리 서비스 만들기(3) - 크롬 확장프로그램 만들기1 (Building a favorite site management service - Building Chrome extension 1) 1시간 만에 만든다고 한건 허세로 들통났다. 내가 생각했던 것보다 간단한 서비스가 아니었다. 고민 끝에 크롬 확장프로그램을 만들어서 이 서비스를 만들어야겠다고 생각했다. 그래서 먼저 크롬 확장프로그램을 만드는 법을 찾아보았다. 생활코딩의 이고잉님 강의 + 문서를 참고하고 나온 결과물. 크롬 확장프로그램 개발을 시작하는 방법. How to start to building a Chrome extension 에디터를 준비한다. IDE도 괜찮고 텍스트 편집기도 좋다. 나는 이번 기회에 Visual Studio Code 를 다운받아서 사용해보았다. 이유는 c9으로 작업하기에는 개발을 하면서 실시간으로 체크하는 것이 어려워서 로컬로 개발 해야했고 가장 가벼운 에디터를 사용하고 싶어서 찾아보니 한 블로그에서 VS CODE 를 추천하길래 사용하게 되었다. Visual Studio 랑은 관련이 없다고 한다. Visual Studio Code 로 작업환경을 만드는 방법은 아래 포스팅을 참고하면 된다. Visual Studio CODE(VS CODE) 설치, 사용하는 방법 에디터 준비가 완료가 됐으면 작업 폴더에 manifest.json , popup.html, script.js , icon.png 를 만들어준다. 이 때 icon.png 는 아이콘이 될 이미지 파일을 넣어준다. 그리고 manifest.json 파일에 아래 코드를 복사해서 붙여넣는다. { "manifest_versi...

Welcome file 만남(미팅, 소개팅) 서비스 만들기(2) - (Building a new dating service, meeting service) 이제 유저 시나리오를 써보려고 한다. 사이트를 켠다. 로그인 화면이 나온다. 회원가입이 안되어 있을 때 회원가입을 한다. 회원가입 완료 후 로그인을 한다. 로그인 후 정보 입력이 완료 안되어있다면 정보 입력 완성하기 버튼이 나옴. 정보 입력 시 본인 인증을 해야 함. 정보 입력이 완료되어있다면 정보 심사 중이라고 나옴. 정보 심사가 끝나면 소개 받을 준비가 됐다고 나옴. 비밀번호 수정할 수 있음. 나의 정보 수정할 수 있음. 나의 정보 수정하면 다시 심사 받아야함. 회원탈퇴할 수 있음 소개 그만 받기를 누르면 그만 받을 수 있음 하루에 1번 1명 소개 받음. 소개가 되면 상대방의 정보를 확인할 수 있고 관심있다는 관심 표현을 보낼 수 있음. 마음에 들면 알아볼까요 라는 메시지 보낼 수 있음 그 메시지는 포인트가 있어야 보낼 수 있음. 아이템을 사면 메시지를 보낼 수 있음(결제). 포인트는 매일 하루 출석체크를 통해 포인트를 받을 수 있음. 매일 하루 광고성 페이지를 클릭하면 또 받을 수 있음. 정보 수정을 하면 다시 정보 심사를 받아야 함. 더 알아볼까요 라는 메시지를 받았을 때 수락한다는 메시지를 보내면 성사가 됨. 수락 메시지 또한 포인트가 있어야 함. 수락은 하루 안에 해야 함. 수락은 하루 지났을 땐 3일 안에 아이템, 더 많은 포인트를 쓰면 수락 가능 함. 수락이 되면 서로의 이름, 핸드폰 번호를 보여줌으로써 서로 연결이 됨. 연결이 되면 소개가 중단 됨. 서로 마음이 맞지 않아 그만 만나게 됐습니다 버튼을 누르면 다시 소개가 시작됨. 해당 버튼을 누르면 상대방도 끊어짐. 아이템을 무통장입금, 계좌이체 또는 카드 결제로 살 수 있음. 생각나는대로 적어보았다. 이를 바탕으로 유즈케이스 다이어그램을 작성해보...

즐겨찾기 사이트 모음 및 관리 서비스 만들기(2) - (Building a favorite site management service) 즐겨찾기 사이트 모음 및 관리 서비스 만들기(2) - (Building a favorite site management service) 기획과 개발 모두 할려고 했는데 아는 동생과 함께 하면 더 재밌을 것 같아서 기획만 하고 개발은 아는 동생이 하는 걸로 ! 가 아니라 데이팅 서비스를 개발하기로 되어서 이건 다시 내가 만들기로 그리고 고민을 해봤을 때 크롬 확장프로그램으로 만드는게 낫지 않을까 싶어서 확장프로그램으로 만들고 그에 맞는 리디자인을 해보았다. 메인 페이지는 바로 북마크 리스트 + 검색바 + 등록 버튼 그리고 리스트에는 수정 및 삭제버튼이 있고 텍스트를 만들면 해당 사이트로 이동 우측 하단에 있는 + 버튼을 누르면 북마크 등록할 수 있는 팝업창이 뜨고 등록할 수 있다. 수정 버튼을 누르면 해당 이름과 URL 을 바꿀 수 있다. 삭제 버튼을 누르면 북마크를 삭제할 수 있다.

footer fixed 꽤나 자주 쓰이는 부분인데 항상 할 때 마다 애를 먹었다. 그래서 기억해두려고 한다. 하단 푸터가 스크롤과 상관없이 계속 밑에 고정이 되어있게 하는 방법 ! How to fix footer location(bottom) HTML < footer > footer fix </ footer > CSS footer { position : fixed ; left : 0 px ; bottom : 0 px ; height : 60 px ; width : 100% ; background : grey ; color : white ; } Result

가장 중요한 돈에 대한 설정이 끝났으니 개발 환경을 만들려고 한다. 기본적으로 작업을 한 결과물을 EC2를 이용해 확인할 수 있다. 그리고 원한다면 EC2를 계속 켜두어 상시 접속할 수 있는 페이지를 만들 수 있다. 이 부분은 간단한 작업이니 빠르고 간단하게 글을 쓰고 마치려고 한다. How to create environment 이름 옆에 있는 지역을 자신이 있는 지역과 가장 가까운 지역으로 설정한다. 그 다음 create environment 클릭 ! Environment 의 Name을 설정해준다. 기본으로 설정되어있는 그대로 놔두고 Next step 을 클릭 ! 만약 설정을 바꾸고싶다면 바꿔도 됨 ! 설정 내용을 확인하고 Create environment 클릭! 그러면 내가 설정한 개발 환경이 하나 만들어진다. Open IDE 를 클릭하게 되면 아래와 같은 화면이 나옴 ! 끝! 이제 하나의 개발할 수 있는 새로운 컴퓨터가 하나 생겼다고 생각하면 편하다. 더 좋은 방법이 있거나 제가 쓴 글의 오류가 있다면 언제든지 코멘트해주시면 감사하겠습니다 :)

처음 코딩을 시작했을 때 Cloud9(c9)으로 시작했다. 클라우드 환경이라서 언제, 어디서나, 어떤 컴퓨터에서 코딩할 수 있는 환경을 쉽게 만들어주어서 편리했다. 특히 컴맹, 초보자인 나에게는 더욱 더 편리했다. 하지만 그 c9이 이제는 AWS에 인수합병(?)이 되어서 기존의 c9은 기존 사용자만 사용할 수 있고(언제까지 사용할 수 있는지 모르겠다) 새롭게 c9을 사용하고자 하는 사람들은 AWS c9 을 사용하여야한다. 그래서 더 좋은 대안이 나오기 전까지는 AWS c9으로 코딩을 해보려고 한다. AWS c9을 이용하기 위해서 AWS 계정 필요하다. AWS 계정을 가입할 때 특이사항은 신용카드를 등록해야하고 카드를 등록하게 되면 1달러가 결제가 된다. 하지만 그 결제된 1달러는 카드 확인용으로써 다시 입금된다고 하니 걱정하지마시길. 가입이 완료되었으면 AWS c9을 사용하기 전에 가장 걱정이 되는 돈!에 대한 설정을 먼저 해주려고한다. 가입 후 1년간 무료이지만 무료로 제공하는 서비스 범위를 넘게 되면 과금이 되고 또 1년이 지나면 과금이 되니 불안함을 제거하기 위해서 설정을 해주는 것이 좋다. 방법은 아래와 같다. 매우 쉽다. How to set AWS billing alarm (AWS 알람 설정하는 방법) 먼저 AWS cloud9에 접속합니다. 로그인 후 오른쪽 상단에 있는 "계정이름" 버튼을 클릭하고 "내 계정 대시보드"를 클릭합니다. 왼쪽 네브바에 있는 항목 중 "기본 설정" 클릭! "프리티어 사용량 알림 수신" 에 체크해주시고 알림을 어느 이메일에서 받을지 "이메일 주소"를 적어주세요. 그리고 아래에 "결제 알림 받기" 를 체크 ! 마지막으로 꼭 "기본 설정 저장"을 클릭해주세요. 다음으로는 조금 더 자세한 알림 설정을 위해서 ...