이번에는 앱에서 매거진 기능을 만들었던 과정을 들려 드리도록 하겠습니다.
상황에 따라 콘텐츠를 잘 전달하기 위해 2가지 형태(가로형/세로형)로 매거진을 등록할 수 있습니다.
어플 기획서(기능정의서) 작성
정확하게 개발할 대상을 특정짓고 분량은 어떻게 되는지 목록으로 정리하는 것이 어플 제작에 필요한 기능정의서를 만드는 과정입니다.
페이지 수를 산출하고 메뉴 구성과 들어가는 기능을 빠르게 알 수 있게 하는데 도움을 줍니다.
일목요연하게 각 기능간 연결 흐름을 알 수 있는 문건입니다.
이번 어플제작에 필요한 매거진에 들어가는 기능정의서입니다.
매거진 페이지는 총 4p로 구성되어 있습니다. 메뉴 구성은 목록, 회원글 상세, 관리자글 상세(세로형), 관리자 글 상세(가로형)으로 되어 있습니다.
어플 디자인 구현
어플제작에 필요한 기능정의서를 토대로 에디터로 구현한 상세 페이지들을 디자인 했습니다.
총 3p이며 매거진 목록, 매거진 상세(세로 스크롤), 매거진 상세(가로 스크롤)페이지까지 세가지 부분으로 나누어서 작업했습니다.
앱개발이 가로형 페이지로 나오기 때문에 UI는 최근에 나오는 방식으로 가로로 스크롤을 전제로 디자인했습니다.
카드 뉴스처럼 옆으로 슬라이드를 하면 가로로 넘겨서 볼 수 있는 구조입니다.
페이지 단위에 한번에 읽을 수 있어 컨텐츠를 한 눈에 볼 수 있는 장점이 있습니다.
일반형은 아래로 스크롤하여 읽는 형태입니다. 보편적으로 가장 많이 쓰이는 형태입니다. 글이 길 경우에는 빠르게 내릴 수 있기에 가로형보다 더 적합합니다. 가로형처럼 글을 한번에 읽을 수 있는 것이 아니라 아래로 스크롤하며 글과 이미지같은 정보를 파악하기에 용이합니다.
이번 앱디자인의 중점을 두려고 한 포인트는 이용자가 쉽게 콘텐츠를 읽을 수 있도록 편이성에 촛점을 맞추었습니다.
물론 페이지를 구성하고 편집하는 것은 웹관리자 페이지 에디터 기능으로 쉽게 구현할 수 있습니다.
어플 제작에 필요한 서버 구현
미들웨어는 스프링 프레임워크 , 데이터 베이스는 Maria DB 베이스로 개발하였습니다.
자세한 내용은 이전에 작성한 '개발자가 하는일'을 참고하시면 됩니다.
어플 기능정의서를 바탕으로 서버에서 수행해야 할 API 작업을 합니다.
API 작업이 완료되면 다음 에디터를 Github에서 다운 받습니다.
다운 받은 에디터를 프로젝트 내로 옮겨두고 해당 페이지의 스크립트에서 해당 에디터를 로드시킵니다.
그리고 에디터에서 작성된 내용 중 이미지는 이미지 서버로 데이터는 데이터 서버로 저장이 됩니다.
저장이 되는 즉시 API 서버와 연동이 되게 됩니다.
이러한 API 서버는 아래의 어플케이션과 연동이 될 자료를 내보내 줍니다.
에디터 세팅
어플 프론트 개발
서버 개발과 동시에 앱프론트단 작업을 합니다.
안드로이드는 html과는 다르게 네이티브인 액티비티단위를 페이지 단위로 쓰며 대부분 자바언어로 개발합니다.
안드로이드 스튜디오에는 뷰를 좀 더 쉽게 구성할 수 있도록 화면구성을 제공하기도 합니다.
디자인 작업이 완료된 이미지를 앱 화면에 나타나게 할 수 있도록 정성스럽게 작업을 합니다. PC 화면으로 작업을 하고 반드시 폰으로 다시 확인하여
양자의 차이를 줄입니다. 어플 제작 전문 팀인 흐름은 미적 감각을 갖고 있는 디자이너가 퍼블리싱도 함께 수행하여 앱의 퀄러티를 크게 높입니다.
그간 본 건 작업뿐 아니라 10 여 건의 앱 디자인을 포함한 앱 퍼블리싱을 수행했습니다.
관리자 페이지(Admin)
기능정의서를 토대로 데이터를 담을 수 있는 관리자 페이지를 작업합니다.
디자이너가 대략 레이아웃을 설정하고 퍼블리싱을 합니다.
레이아웃 윤곽이 나오고 정밀히 작업을 하고 나면 개발자가 붙어서 데이터 연동을 시도합니다.
사전에 구축해 놓은 웹서버를 바탕으로 데이터를 연동할 수 있도록 코딩을 합니다.
제대로 구축이 되었는지 테스트를 해보며 성능 극대화를 기합니다.
우리가 공을 들여 놓아서 애착이 가는 지 기능을 잠깐 소개하고 싶은 욕구가 생깁니다.
우리가 개발한 관리자 페이지는 다음과 같이 매거진 콘텐츠를 등록 / 수정 /삭제할 수 있습니다.
콘텐츠 종류에 따라 가로형인지 일반형인지 에디터 형을 선택할 수 있습니다.
파워포인트같이 미리 보기를 제공하여 콘텐츠의 질을 높일 수 있도록 하였습니다.
물론 파워포인트같은 형태이기 때문에 쉽게 UI에 익숙해질 것입니다.
자랑은 이정도로 하죠.
^^
관리자(어드민)_매거진 등록
어플 검수 및 QA
요구분석 - 설계 - 구현 - 테스트 단계에서
마지막 단계인 테스트 및 QA 성능극대화 부분입니다.
설계 안대로 제대로 작동하는 지 엄밀히 테스트하는 단계입니다
검수 페이지를 만들고 하나씩 하나씩 검수해 봅니다.
기능정의서가 기본이 되고 중간에 수정이 있는 사항은 별도로 기록해 두어서 개발이 어떤 과정을 거쳐 완성됐는 지
확인할 수 있도록 합니다.
