안녕하세요. 블로그 주인장 N` 입니다.


10월 한 달을 그대로 태워버린 ESC 행사가 종료되었고, 프롤로그를 썼으니 에필로그 역시 작성하고자 다시 한번 펜을 들었습니다.


한번 살펴보니, 그래도 꽤 많은 글이 쓰여진 것을 확인했습니다.



나름, 이정도면 처음 써본 것 치고는 괜찮은 일지가 아니었을까 하는 생각이 드네요. ^^;



이번 ESC 를 준비하면서 오랜만에 즐겁게 개발해본 것 같았습니다.

만들고 싶은 것을 정하고, 좋은 사람과 개발을 한다는 것은 정말 행복했었습니다.


이번에 준비를 하면서 가장 중요하게 생각했던 것은 [완벽한 작품]이나 [반드시 1등]같은 일회성 보상은 아니었습니다.


정말 하고자 했던 것은 주니어 후배(필자도 주니어 level 이지만...)에게 가장 필요한 "나도 노력하면 무엇이든 할 수 있다는 자신감" 을 주는 것이었습니다.

(나름, 2017년 버킷 리스트 중 하나였습니다.)

 

 


어차피 실무에서는 열심히 구르고 욕을 먹으며 쓰라린 사회의 맛을 보겠지만, 일회성에 불과한 이 프로젝트의 경험 속에서 느꼈던 그 무엇이든지 늘보다 더 나은 자신이 될 수 있도록 도와주면 좋겠네요.. :-)

사실 이 것을 준다고 줄 수 있는 것은 아니고 팔로워들이 잘 따라와줘야 실현되는 이야기인데, 다행히 사람들은 잘 만났습니다. (하하.)

 

아 그리고 조금 자랑을 하자면 다행히 뭐라도 건져서, 상처뿐인 영광 아닌 성공경험이었습니다.

 

 

 

하지만, 단순히 주기만 할 것이라 생각했던 이번 프로젝트에서 저 역시도 받은 것이 있었습니다.

특히 행사 당일 발표 직전 단지 후배로만 봤던 동료에게 "할 수 있다" 라는 용기를 받았고, 이는 큰 무대에서 끊지 않고 발표를 마칠 수 있는 계기가 되었습니다.


여러가지로 2017년 중 가장 뜻깊은 경험이었습니다. 

마지막으로 우리 앱의 로고를 올리며, 이번 카테고리를 마무리 합니다. :-)

 

 

 


















반응형
Posted by N'

안녕하세요! miTHON의 위치 정보 및 안드로이드 서비스 단 담당 강현지입니다.


구글 지도 API 활용하기 두번째 포스팅으로 찾아왔습니다!!!


이번 포스팅은 지난번 포스팅에 말씀드린대로 현재 위치 받아오기실시간 트래킹에 대해 살펴보려고 합니다.



[ 4단계: 현재 위치 받아오기 ]


현재 위치를 실시간으로 받아와서 지도에 마커를 표시하는 코드를 아래와 같이 작성하였습니다. 


/**
* 현재 위치정보 조회.
*
* @return
*/
public Maybe<Location> get_현재위치정보() {
try {
// 권한 체크.
CheckUtil.Check(ContextCompat.checkSelfPermission(mContext, Manifest.permission.ACCESS_FINE_LOCATION)
== PackageManager.PERMISSION_GRANTED, "[ACCESS_FINE_LOCATION] 권한체크 에러", Exception.class);
CheckUtil.Check(ContextCompat.checkSelfPermission(mContext, Manifest.permission.ACCESS_COARSE_LOCATION)
== PackageManager.PERMISSION_GRANTED, "[ACCESS_COARSE_LOCATION] 권한체크 에러", Exception.class);

// 위치정보 조회.
LocationManager locationManager = (LocationManager) mContext.getSystemService(Context.LOCATION_SERVICE);

// 위치 정보 사용여부 조회.
{
CheckUtil.Check(get_위치정보_요청가능_여부(locationManager), "위치정보 사용불가능 상태", Exception.class);
}

// 네트워크 정보로부터 데이터 조회.
{
// 네트워크 정보로 부터 위치값 가져오기
if (isNetworkEnabled) {
locationManager.requestLocationUpdates(
LocationManager.NETWORK_PROVIDER,
MIN_TIME_BW_UPDATES,
MIN_DISTANCE_CHANGE_FOR_UPDATES
, this
);

if (locationManager != null) {
location = locationManager.getLastKnownLocation(LocationManager.NETWORK_PROVIDER);
}
}
}

// GPS 정보로부터 데이터 조회.
{
if (isGPSEnabled) {
if (location == null) {
locationManager.requestLocationUpdates(
LocationManager.GPS_PROVIDER,
MIN_TIME_BW_UPDATES,
MIN_DISTANCE_CHANGE_FOR_UPDATES,
this
);

if (locationManager != null) {
location = locationManager.getLastKnownLocation(LocationManager.GPS_PROVIDER);
}
}
}
}

} catch (Exception e) {
Log.e(MiRunConstDefinition.LOG_NAME, "위치정보 획득 실패", e);
}

return MaybeUtil.JustNullable(location);
}
/**
* 마커 그리기
*
* @param myLocationMaybe
*/
public void setDrawMaker(Maybe<Location> myLocationMaybe) {

MaybeUtil.Subscribe(myLocationMaybe,

location -> {

// Creating a LatLng object for the current location
LatLng latLng = new LatLng(location.getLatitude(), location.getLongitude());

CameraPosition cp = new CameraPosition.Builder().target((latLng)).
zoom(17).
build();

// Showing the current location in Google Map
mGoogleMap.moveCamera(CameraUpdateFactory.newCameraPosition(cp));

// 기존 마커 삭제.
if (marker != null) {
marker.remove();
}

// 마커 설정.
MarkerOptions optFirst = new MarkerOptions().
position(latLng).
icon(BitmapDescriptorFactory.fromResource(R.mipmap.ic_marker_pink)).
title(MiRunResourceUtil.GetString(R.string.label_record_current_position));

marker = mGoogleMap.addMarker(optFirst);
},
() -> MiRunViewUtil.ShowToast(R.string.label_emergency_request_location_fail));
}






[ 5단계: 실시간 트래킹 ]


실시간 위치정보를 받아 트래킹 라인을 그리는 코드는 아래와 같습니다.


/**
* 지역 정보 목록 세팅.
*
* @param locationList
* @param myLocationMaybe
*/
public void setLocationList(@NonNull List<LocationConcreteVO> locationList, Maybe<Location> myLocationMaybe) {
// TODO khj1219

// 위도경도 목록 제작.
List<LatLng> latLngList = new ArrayList<>();
{

Observable.fromIterable(locationList).
forEach(vo -> {
// 위도 경도 처리.
latLngList.add(new LatLng(vo.getLatitude(), vo.getLongitude()));
Log.d(MiRunConstDefinition.LOG_NAME, String.format("초기화용 데이터 -> 위도 : %f, 경도 : %f, 시간 : %d",
vo.getLatitude(), vo.getLongitude(), vo.getTime()));
});

myLocationMaybe.
map(location -> new LatLng(location.getLatitude(), location.getLongitude())).
subscribe(latLngList::add);
}

// 마지막 라인 마커찍기.
{
if (!ContainerUtil.IsEmpty(latLngList)) {
setDrawMaker(myLocationMaybe);
}
}

AsyncBuilder.Create((FlowableEmitter<Double> emitter) -> {
if(latLngList.size() > 1){
Double result = getRecordDistance(latLngList);
emitter.onNext(result);
emitter.onComplete();
}
}).doOnNext(result -> {
// 거리 업데이트.
if(!Double.isNaN(result)){
setTextByDistance(result);
setTextByDonation(result * MiRunConstDefinition.CONST_DONATION.RUN_PER_REWARD);
}
}).run();

// 달리는 경로 polyline 생성.
drawRunningPolyline(latLngList);
}
/**
* 달리는 경로 polyline 생성(pink)
*
* @param runningPoints
*/
public void drawRunningPolyline(List<LatLng> runningPoints){
PolylineOptions polylineOptions = new PolylineOptions();
polylineOptions.color(MiRunResourceUtil.GetColor(R.color.color_path_pink));
polylineOptions.width(7);
polylineOptions.addAll(runningPoints);
mGoogleMap.addPolyline(polylineOptions);
}




이것으로 구글 지도 API 활용하기 5단계에 대해 모두 살펴보았습니다.


트래킹의 경우 테스트가 매우 힘들었지만 결과적으로 앱이 잘 나와서 매우 행복합니다.


드디어 발표가 내일인데 좋은 결과 있었으면 좋겠네요.


아직까지 열심히 디비 작업중이신 우리 유감독님 더불어 피티엥 혼신의 힘을 다하고 계신 남배우님 정말 존경하고 조금만 힘내세요!!!


우리 모두 화이팅 입니다~~


반응형
Posted by N'

안녕하세요! miTHON의 위치 정보 및 안드로이드 서비스 단 담당 강현지입니다.


MIDAS Research Festival의 해커톤인 ESC 주제로 저희는 마라톤 앱인 miTHON에 지도 관련 기능이 많습니다.


아래 기획서를 받고 구현을 위해 구글 지도 API를 활용하였고, 그 내용을 공유하고자 게시글을 올리게 되었습니다~


그럼 우선 기획서부터 살펴볼까요?



1) [그룹] 이벤트 생성하기 (경로 생성, 식수대 처리)





2) [개인][메인] 기록 시작




위 기획서를 바탕으로 구글 지도 API를 활용하였고, 그 기능을 5단계로 설명하려고 합니다.


해당 게시글에서는 3단계까지 소개하겠습니다.


[ 1단계: 맵뷰 띄우기 ]


1. 사이트에 가서 API Key를 발급 받습니다.

(레퍼런스: https://developers.google.com/maps/documentation/android-api/signup?hl=ko)

 


2. app 폴더 밑에 있는 build.gradle에 가서 구글 맵 API 컴파일 설정을 해줍니다. Google Play Services 전체 라이브러리(com.google.android.gms:play-services)를 추가하는 대신에 Google Maps Android API를 사용하기 위해 필요한 라이브러리만 추가해주는 것이 좋습니다.

그리고 SDK Manger에서 Google Play services를 설치한다. (설치 안하고 빌드시 에러와 동시에 설치하는 링크를 제공할 것입니다.)

// Google Maps Android API
compile 'com.google.android.gms:play-services-maps:11.0.2'
compile 'com.google.android.gms:play-services-location:11.0.2'

구글 플레이 서비스를 이용하려는 해당 뷰에 아래 코드를 넣으면 구글 플레이 서비스를 이용할 수 있습니다.

GoogleApiAvailability.getInstance().isGooglePlayServicesAvailable(this);

 

3. AndoridManifest.xml에 가서 아래와 같이 meta-data 설정을 해줍니다.

<!-- 구글 API KEY 설정 -->
<meta-data
   
android:name="com.google.android.geo.API_KEY"
   
android:value=" 발급받은 API key'" />

 


4. 맵뷰를 구현할 화면의 onCreate 메소드에 SupportMapFragment를 이용해 지도 객체를 생성합니다. Fragment 객체를 지도를 처리할 Activity)에 추가한다. 프래그먼트에서 getMapAsync()를 호출하여 콜백을 등록합니다.

(레퍼런스: https://developers.google.com/maps/documentation/android-api/map?hl=ko)

@Override
protected void onCreate(Bundle savedInstanceState) {
   
super.onCreate(savedInstanceState);

   
// BitmapDescriptorFactory 생성하기 위한 소스
   
MapsInitializer.initialize(getApplicationContext());

   
SupportMapFragment mapFragment = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map));
   
mapFragment.getMapAsync(this);
}

 

5. 맵뷰를 구현할 화면에 OnMapReadyCallback 인터페이스를 구현하여 onMapReady 메소드를 오바라이딩 합니다. onMapReady은 콜백 메소드로서 GoogleMap 객체의 핸들을 가져옵니다.

(레퍼런스: https://developers.google.com/android/reference/com/google/android/gms/maps/OnMapReadyCallback )

public interface OnMapReadyCallback: Callback interface for when the map is ready to be used.

@Override
public void onMapReady(final GoogleMap googleMap) {

   
this.mGoogleMap = googleMap;

   
String coordinates[] = {"37.397446", "127.105714"};
    double
lat = Double.parseDouble(coordinates[0]);
    double
lng = Double.parseDouble(coordinates[1]);

   
LatLng position = new LatLng(lat, lng);
   
GooglePlayServicesUtil.isGooglePlayServicesAvailable(MapActivity.this);

   
// 맵 위치이동.
   
this.mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(position, 15));

}

 

위의 코드 실행결과 아래와 같이 지정한 위경도 좌표에 포커스가 된 맵뷰를 나타낼 수 있습니다.






[ 2단계: 화면에 마커 표시 및 마커 클릭 이벤트 ]


1. 맵뷰가 구현된 화면에 OnMapClickListener, OnMapLongClickListener, OnInfoWindowClickListener 인터페이스를 구현하여 OnMapClick, OnMapLongClick, OnInfoWindowClick 메소드를 오버라이딩합니다.

(레퍼런스: https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap.OnMapClickListener)

 

2. 1단계에서 오버라이드한 OnMapReady 메소드의 구글 맵 지도에 클릭 이벤트를 세팅합니다.

@Override
public void onMapReady(final GoogleMap googleMap) {
    mGoogleMap = googleMap
;

    
mGoogleMap.setOnMapClickListener(this);
   
mGoogleMap.setOnMapLongClickListener(this);
   
mGoogleMap.setOnInfoWindowClickListener(this); //정보창 클릭 리스너(마커 삭제 이벤트)
}

 

3. 오버라이딩한 OnMapClick, OnMapLongClick, OnInfoWindowClick 메소드에 아래와 같이 클릭했을 때 나타날 이벤트를 설정합니다. 이때 MarkerOptions를 이용해 마커를 커스터마이징 할 수 있습니다. (마커가 표시될 위치, 아이콘, 타이틀 등 추가 가능)

 

- 지도를 클릭했을 때 "출발" 마커 생성

@Override
public void onMapClick(LatLng latLng) {
    MarkerOptions markerOptions =
new MarkerOptions();

       
//add marker
       
markerOptions.position(latLng);
       
markerOptions.icon(BitmapDescriptorFactory.fromResource(R.mipmap.ic_marker_pink));
       
markerOptions.title("출발");
       
mGoogleMap.addMarker(markerOptions).showInfoWindow();

       
// 맵셋팅
       
arrayPoints.add(latLng);
       
arrayMarkerOptions.add(markerOptions);
}

 

- 지도를 길게 클릭했을 때 polyLine 생성

@Override
public void onMapLongClick(LatLng latLng) {
   
// TODO
    //
마커를 길게 누를 경우 발생할 이벤트 작성
}

 

- 마커 info창을 클릭했을 때 해당 마커 삭제 이벤트

@Override
public void onInfoWindowClick(Marker marker) {
   
// step2에서만 삭제 가능 && 시작 위치는 삭제 못함
   
if((getViewPager().getCurrentItem() == 1) && !arrayPoints.get(0).equals(marker.getPosition())){
       
// 지도 초기화
       
mGoogleMap.clear();

       
// 리스트에서 마커 삭제
       
arrayPoints.remove(marker.getPosition());
       
arrayMarkerOptions.removeIf(v -> v.getPosition().equals(marker.getPosition()));
   
}
}


        




[ 3단계: 마커를 연결하는 Polyline 생성 ]


1. 마커를 연결할 polyLine 생성은 PolylineOptions를 사용합니다. (라인 색, 두께 등 지정 가능)

// polyline 생성
public void drawPolyline(){
    polylineOptions =
new PolylineOptions();
   
polylineOptions.color(Color.RED);
   
polylineOptions.width(5);
   
polylineOptions.addAll(arrayPoints);
   
mGoogleMap.addPolyline(polylineOptions);
}

 

2. [2단계] OnMapLongClick 메소드에 Polyline을 그리는 로직을 작성하여 마커를 길게 누를 경우 마커 리스트를 연결하는 polyLine을 만들 수 있습니다.

@Override
public void onMapLongClick(LatLng latLng) {
   
if(getViewPager().getCurrentItem() == 1) { // 2page
       
polylineOptions.addAll(arrayPoints);
       
mGoogleMap.addPolyline(polylineOptions);
   
}
}




우선 여기까지 해서 구글 지도 API 활용하기 포스팅을 마치겠습니다.


구글 지도 API는 처음 사용하시는 분들도 쉽게 사용할 수 있을 만큼 API 문서도 잘 정리되어있고, 예제 소스도 많이 있습니다.


생각보다 지도 관련 결과물이 잘 나와서 매우 뿌듯하네요~ 다음번 포스팅은 현재 위치 받아오기실시간 트래킹에 대해 소개해 드리겠습니다.


그럼 다음 포스팅에서 봐요~~


4-GRAM 화이팅입니다!!! 우리 조원 너무 좋아 ^______^!!


반응형
Posted by N'

안녕하세요 :) 저희 앱(miTHON)의 서버운영/DB/백엔드 담당 유덕형입니다.


MIDAS Research Festival 의 강력한 우승후보답게 저희는 상당한 수준의 개발 완성도를 자랑하는데요.


제가 담당한 부분을 이제부터 차근차근 설명을 드리는 시간을 가져보겠습니다.


먼저 저희 서버 아키텍처에 대해 설명을 드려볼까 합니다.


저희 서버는 AWS (Amazon Web Service) 에 올라가있습니다.

AWS 의 장점은 이루 말할 수 없을 정도로 많은데요. (자세한 내용은 저보다 구글을 참고해주세요.)


1. AWS 간략 설계 아키텍처



AWS 에는 각각의 기능에 최적화된 서버를 구성할 수 있도록 다양한 모듈들을 지원하는데요.

저희는 DB를 MySQL 을 사용하므로 Relation Database 를 구축할 수 있는 RDS 를 선택했습니다.

또한 파일 업/다운로드에 용이하며 정적 서버 호스팅도 지원하는 S3 를 사용했습니다. 

S3 의 장점은 바로 다운로드 URL 을 만들어 제공한다는 것인데요. 저희는 파일서버에 구성원 사진과 SNS 사진들을 저장하고 있습니다.


마지막으로 WAS 를 띄워놓는 EC2 인데요. 역시 서버는 우분투가 진리죠.


2. 백엔드 모듈 아키텍처



서버 백엔드 개발은 웹솔루션에서 사용하고 있는 Spring framework 기반 위에서 진행되었습니다.

보시는건 저희 Class Diagram 입니다. 생각보다 클래스가 많네요? 허허 이것이 저의 클라쓰일까요..

이 수많은 클래스들에 제 영혼이 4Gram 정도 들어간 것 같네요. 노동 착취의 향기가 느껴지지 않나요?


3. DB E-R Diagram


1) 논리모델




2) 물리모델


이번 긴 추서 연휴를 이용하여 저희팀의 DBA 이신 남궁용락 차장님에게 전수받은 기술로...! 

DB 설계를 진행해봤습니다. 저희 앱의 큰 틀이 되는 그룹, 그 하위의 이벤트 등 기획자님이 기획서를 잘 써주신 덕에

편안하게 설계를 진행할 수 있었습니다.

여기서 주목할 점은 member 정보를 독립적으로 가져감에 따라 다른 모듈과의 호환성을 조금 더 편리하게 만들었다는 것입니다.


4. 그리고 개발



착즙 세팅이 완료되었다면 그 기반 위에서 이제 저를 갈아넣기만 하면 됩니다.

코드가 알록달록한게 예쁘네요.


5. 마치며...


기술적인 내용은 전혀 없네요. 결과물 위주의 블로그를 써버림.


총 개발기간은 약 1개월 정도 되었네요. 추석기간동안 좀 더 열심히 할걸... 

ESC (Eat, Sleep, Coding) 의 취지에 맞게 1개월동안

퇴근하면 자기 전까지 밥먹고 개발하고 자고 의 for loop 속에서 살았습니다 ㅋㅋㅋㅋ


그럼에도 항상 웃음을 잃지 않고 정말 열정적으로 착즙한 강현지 사원과 남두현 사원님,

그리고 우리 앱의 기획과 디자인을 담당하신 성지윤 사원님! (군대간 유형주 사원도...)

감사하고 즐거운 시간이었다고 말씀드리고 싶습니다.


2017년이 마무리 되어가는 이 시점에, 그래도 한달 정도는 최고로 열심히 살았구나 하는

춥지만 뜨거운 시간이었습니다.


그럼 우리 마지막까지 힘내서 달려보자구요 !

반응형
Posted by N'

지난, 9월 28일 회의과정에서는 앱의 초기 기획안으로부터 Use-case 및 핵심 개념을 도출하게 되는 계기가 되었습니다.


이후, Rom(다른 팀원)님이 이슈관리 시스템에 올려주신 기획내용에 대한 추가 정리가 있었고, S님(기획자)께서는 액슈어라는 기획툴을 이용하여 스토리보드를 작성해주시고 계십니다.


어느정도 마무리가 되어가는 중, 고민거리가 생겼습니다.

그것은 바로 "디자인" 입니다.


현재, 저희 팀원 중에 디자이너는 없으며 또한 포토샵을 다룰 줄 아는 분이 없습니다.

(다룰 줄 모르면, 지금부터 배우면 되는 것이 아닌가? ㅡㅡ^)


이 사실은 추 후 앱 개발에 있어서, 아이콘 하나하나를 모두 구글링해서 찾아야함을 의미합니다.

구글링을 하더라도 배경이나 색감이 안맞으면 그림의 떡입니다. ㅜㅡㅜ


"하지만 이가 없으면 잇몸으로 음식을 씹고, 꿩이 없으면 닭을 사용하는 법"


오늘 살펴 볼 주제는 무려, "포알못(포토샵을 지 못하는 )이 아이콘 만드는 법" 입니다. 


제 개인적인 기준에서는 포토샵은 사실 디자이너나 퍼블리셔의 전유물이라는 편견이 조금 있습니다.

물론 다재다능한 분들은 잘 사용할 것이고, 시간만 충분하다면 저희들 중 누구라도 포토샵을 조금만 공부해서 할 수는 있겠지만 귀찮고 개발시간도 부족할 것 같습니다.


이럴 때 우리는 많은 직군들이 다룰 줄 아는 국민 툴인 PPT(파워포인트)로 아이콘을 만들 수 없을 까라는 고민을 하게 되었고, 이를 통해 아이콘을 제작할 수 있음을 깨달았습니다.


PPT 의 장점은 아래와 같이 많은 도형들을 제공해준다는 것입니다.

대부분 저희가 보는 아이콘들은 이 도형들로 제작이 가능할 것이란 생각이 듭니다.

 

 

 

또한 한가지 더 살펴볼 것은 구글의 디자인 색 가이드입니다.

구글 색 - 디자인 가이드


이 두 가지를 이용하여, 우리는 멋진 아이콘들을 제작할 수 있을 것 같습니다.

이번 포스팅에서 샘플로 만들어 볼 것은 게시판을 나타는 햄버거 목록 아이콘을 제작해 보려 합니다.


일단, PPT 에서 제공하는 도형들을 이용하여 아래와 같이 배치를 해줍니다.

요즘 좋아진 PPT 는 정말 좋아져서, 간격까지도 다 재줍니다.

 

 

 

아이콘의 배치가 다 끝났다면, 구글 색 가이드에서 원하는 색을 스크린 샷으로 찍습니다.

꼭 구글 색 가이드가 아니더라도, 원하는 색이 있다면 캡처를 시도합니다.

 

 

 

이렇게 찍은 스크린샷을 PPT 에 붙여넣고, 도형의 색을 우리가 원하는 색으로 맞춰줍시다.

PPT 의 색 피커를 이용하면, 쉽게 색을 맞춰 줄 수 있습니다.

 

 

 

이렇게 색을 맞춰줬다면, 모든 도형을 선택하고 그룹핑을 시켜줍니다.

 

 


이제 그룹핑된 아이콘을 [선택 -> 마우스 오른쪽버튼]을 누르고, 그림으로 저장을 눌러 줍시다.

 

 


그럼, 짜잔!

배경이 없는 우리가 원하는 PNG 아이콘이 생성되었습니다. 

 


사실, 전문적인 간격, 크기, 해상도에 따른 아이콘 배치 등의 모든 가이드가 맞춰지면 가장 베스트하겠지만, 열악한 환경이고 당장 급하다면 이 방법이 도움이 될 것이란 생각이 드네요. ㅎㅎ


이상, 오늘의 기획일지도 마무리입니다. ^^








반응형
Posted by N'

2017년 9월 28일 기획일지 


지난, 9월 26일 회의[아이디어 재점검]에서는 앱에 필요한 아이디어들은 대부분 확정이 되었습니다.

이 날의 회의가 궁금하다면, 아래 포스팅을 참고 :-)



이와같이 아이디어 재점검이 마무리될 때 쯤 새로운 동료가 생겼습니다.

Developer 로만 구성되었던 팀에 전문적으로 기획을 해주시는 분이 참여를 하게 되었습니다.

(나름, 팀의 밸런스가 맞춰지는 느낌이 듭니다. @.@)


이에따라, S님(편의 상, 계속 기획자님이라고 하기가... ^^; 이 분의 이니셜을 인용...)에게 현재의 기획 상태 및 정리 상황을 브리핑하게 되었습니다. 

"이미 확정이 되었으니, 이렇게 갑시다." 보다는 우리의 요구사항과 현재 프로젝트의 진행도는 이 정도임을 알리고, 전문적인 S님의 의견을 듣고 싶었습니다.


이에 따른 피드백은 간단하지만 묵직했습니다.


"앱 제작을 위한 리소스는 많이 준비가 되었지만, 정리가 조금 안 된 느낌? 정리가 조금 필요합니다."


이에 따라 업무시간을 마치고, 리소스에 대한 정리 및 스토리 보드를 작성하는 회의를 가지게 되었습니다.

이 날 회의에서는 앱 개발을 위한 리소스의 정리와 개념 정의 및 앱 사용 시나리오를 구상했습니다. 


1. 리소스 정리와 개념 정의


S님의 피드백 내용에 따라 가장 먼저 해야할 것은 기획의 정리였고, 앱의 목표를 먼저 다시 그려보는 계기를 가지게 되었습니다.

기존 기획안에는 개발목표라는 항목이 존재했고, 이를 정리해보았습니다.


기존의 개발목표는 아래와 같았으며, 

 

 



이에 대한 구체적인 세부기능들을 회의 전까지 아래와 같이 준비를 했었습니다.




이 안에서, S님의 주도하에 리소스들을 특정 카데고리로 나눠보는 작업을 하였습니다.

앱의 요구사항에 따라 사용자 측면(개인과 관리자)으로 분리하고, 각 사용자 관점에 따라 위에서 도출한 세부기능들을 추가해봤습니다.

 


이 과정을 통해, 관리자와 개인 사용자라는 개념 도출관점에 따른 기능 명세분류에 맞게 정의할 수 있었습니다.

이제는 앱 사용 시나리오를 살펴보면 좋을 것 같네요. ㅎㅎ



2. 앱 사용 시나리오에 따른 스토리보드


다음, 살펴볼 내용은 앱 사용 시나리오에 따른 스토리보드 입니다.

(원래는 S님께서는 혼자해도 된다고 했지만, 블로그 포스팅 및 혼자 끌어가는 것을 방지하고자 같이 참여했습니다. ^^;)


스토리보드 작성은 다같이, 종이 몇장 깔아두고 아래와 같이 진행을 했었습니다.

(빈약한 것 같지만, 원래 이런작업은 아날로그가 최고입니다. ㅋㅋㅋ)




이 과정에서는 개인과 관리자의 앱 사용 시나리오를 구상하였으며, 조금 더 상세 개념을 도출했습니다.


세부적인 기능에 대한 고민 중, 그룹이라는 개념이 한 개 더 생겼으며 그룹에는 마라톤을 진행 이벤트를 등록한다는 유즈케이스(use-case) 를 뽑아냈습니다.

중요한 것은 사용자에 따라 어떤 유즈케이스가 생기는 지를 파악하는게 중요합니다.


이에 따라 마라톤 행사 및 아젠다 등 관리적인 측면에 대하여 관리자가 그룹에 이벤트를 등록을 하며, 사용자가 기록이나 기타 게시물을 이벤트에 따라 기록할 수 있다는 시나리오와 함께 아래와 같은 스토리보드를 작성하게 되었습니다.

 

 

큰 뼈대는 제작이 되었고, 그에 따라 공지 사항 앨범 공유 등 부가적인 기능을 넣기가 더 쉬워진 듯합니다.

이 때 주의할 점은 부가기능을 넣기가 쉽다고 하더라도, 너무 많이 넣으면 프로젝트가 비대화가 될 수 있다는 점입니다.



오늘 회의에서는 요구사항에 대한 정리와 구체적인 기능 명세가 나온 듯 합니다.


일정과 자원 등 현실적인 면에서 기능과 우선순위를 고려해보았고, 이에 따라 S님께서는 플로우 차트를 먼저 작성해주시기로 하였습니다.

플로우 차트는 아래 주소에서 확인이 가능합니다.

[마이톤 기획노트 : http://xbu1aq.axshare.com/#g=1&p=4gram_기획노트]


아직까지는 프로젝트가 잘 진행이 되는 것 같습니다. 느낌상... ㅎㅎ

꼭 성공적으로 마무리가 되었으면 좋겠네요. @.@


다 같이 파이팅 합니닷!!






반응형
Posted by N'

2017년 9월 26일 기획 일지


제품을 출시하기 위해 해야할 가장 첫 번째는 역시 아이디어 검토인 듯 합니다.

잘 팔릴 제품이나 사용성에 좋은 제품을 찾아내야, 실제로 소프트웨어를 제작 후 "상처뿐인 영광"이 되는 상황을 방지할 수 있겠죠..


위의 취지에 맞춰, 4-GRAM(팀 이름)에서는 한달동안 진행할 프로젝트로 마라톤과 SNS 를 융합시킨 어플리케이션을 제작하려 하고 있습니다.

사내에서 진행하는 대회이기 때문에 사내에 도움이 되는 프로젝트가 좋지 않을지에 대한 생각이 들었고, "나눔" 활동을 지향하는 귀사에서 매년 2회 진행하는 마라톤 행사가 저희의 타겟이 되었습니다.


마라톤 행사에 대해 많은 것을 생각해보니 대회 전 연습 행사부터 본 행사까지 "익숙해진 불편함" 들이 많이 있었으며, 꽤 많은 기능을 제공해 줄 수 있을 것이란 생각이 들었습니다.


아이디어의 실효성에 대한 많은 토의가 있었으며, PPT 를 아래와 같이 브레인 스토밍에서 나온 모든 것을 정리하고 있습니다. 

 

하지만 이를 아무렇게나 정리하기 보다는 정해진 양식에 따라 한 번 작성을 해보자는 생각이 들었습니다.

특정하게 정해진 목차를 기술하고, 그에 따라 살을 붙이면 정리가 낙서가 되는 것을 방지할 수 있지 않을까 에 대한 생각이 들더군요.


이를 위해 아이디어 실효성에 대한 면이 부각, 기술적인 스택, 어필할 수 있는 요소를 찾아보며, 우리가 개발해야할 최종 이 무엇인지를 정리할 필요가 있다는 생각이 들었습니다.


이렇게 정해진 목차는 다음과 같았습니다.


[선정배경] -> [개발목적] -> [기술동향] -> [개발목표] -> [프로젝트 어필 홍보] -> [개발내용] -> [피드백] 


각 목차는 기획 단계에서 꽤 괜찮은 정리를 할 수 있었습니다.



1-2. 선정배경 & 개발목적


앞써, 언급한 이 어플리케이션 의 당위성, 실효성을 검증하기 위한 여러 생각을 할 수 있게 생각했습니다.

선정배경이 제대로 작성 되야 "상처뿐인 영광"이 되지 않을 것 같네요...


3. 기술 동향


벤치마킹 단계였습니다. 


마라톤 앱을 많이 안써봤기 때문에 여러 어플에 대한 조사를 많이 해봤으며, 특히 디자인면에서 많은 참고가 되었습니다.

이 단계에서는 아마 경험없는 저희같은 스타트업의 많은 교보재가 될 것으로 예상 됩니다.


(마라톤 앱이 보통 지도를 많이 사용하는데, 지도를 사용하는 어플도 이쁜 UI 를 작성할 수 있다는 것을 깨닫게 되었네요. ㅎㅎ)

 

 


4. 개발 목표


저희가 제작할 어플리케이션의 꼴입니다.


이 있는 것과 없는 것은 소프트웨어 제작에서 정말 큰 차이를 둔다고 생각하고 있으며, 1순위로 제작해야 하는 필수적인 기능 들을 정리해볼 수 있는 기회였습니다.

 

 


5. 프로젝트 어필 홍보


전략적인 사고로 어떻게 하면, 상을 받을 수 있을지에 대한 고민입니다.

사실상 저희에게 가장 중요한 면인데, 실무라고 한다면 어떻게 물건을 팔지에 대한 고민이 되겠군요.

 

 

 


7. 피드백


여러 사람이 회의를 하기 때문에, 각 사람들이 생각지 못한 결론은 많이 등장 하는 것 같습니다.

특히, 기존 목차에서는 "기능 소개" 라는 부분이 없었는데, 이에 대한 지적이 매우 적절 했었습니다.


언제나 마지막 목차에는 각 회의록에 대한 피드백이 있어야 할 것 같습니다. ^^;

 

 

1회 차 회의의 정리 내용은 이와 같았습니다.

정리해준 모든 자료들에 대한 내용인 [ESC 개발기획서 - 가칭 마이톤 (버전 0.2)] 를 이 곳에 첨부합니다.


첨부 : [ESC 개발기획서 - 가칭 마이톤 (버전 0.2)]






반응형
Posted by N'