[Project] MarketPass 마켓패스

UI SEOK YU·2022년 10월 26일

Projects

목록 보기

1/1

(19년도에 팀프로젝트로 만든 제작물의 뒤늦은 업로드)

개발 배경

대형마트의 불편함

3인 1조로 제작한 마켓패스는 기존 마트에서 사용하는 계산시스템의 불편함을 해소하기 위해 개발되었다.

마트에서 장을 보았단 기억을 떠올려 보자. 사려는 물건을 카트에 담아서 장을 보다가, 다시 계산할 때는 계산대 위에 일일히 물건을 다 꺼내야하는 불편함을 느낀적이 있지 않은가?
또한 꺼내는 것 뿐만 아니라 바코드도 찍고 다시 카트에 담아서 주차장의 차까지 옮겨야 한다.

마트도 고속도로처럼 자동으로 결제하고 지나가는 시스템이 있으면 시간과 체력을 아낄 수 있지 않을까? 하는 상상에서 프로젝트는 시작되었다.

그런 시기에 대형마트에서는 ESL 이라는 전자가격표가 보급되고 있었다.
ESL은 매장 내에 가격표을 일일히 인쇄하여 갈아끼우지 않아도, 전자시스템에 의해 일괄적으로 변경할 수 있는 편리한 방법이다. 또한 이 ESL에는 NFC 기능도 탑재 될 것이라는 정보도 공개 되었다.

서비스 소개

그럼 NFC를 활용하자

따라서 이 어플의 주 기능은 NFC를 활용한 모바일 장바구니다.
간단히 설명하면, 고객이 카트에 물건을 담을 때 휴대전화를 ESL에 태그하여 장바구니를 유지한다. 그 후 계산대에서는 장바구니의 전체 가격만 결제하여 통과하면 되는 방식이다.

세부 기능으로는

NFC Writer : ESL에 제품 정보를 기록할 수 있는 기능
쇼핑하기 : ESL에 태그하여 장바구니를 생성
결제하기 : 장바구니에 담긴 물건의 총합을 계산하여 QR코드로 생성
구매내역 조회 : 이전에 구매하거나 결제한 내역을 열람가능

관계를 자세히 그려보면 위와 같다.

남은 건 코딩 뿐

서비스 개발 과정...

NFC 기능

다뤄본 적도 없는 NFC를 처음 만져보느라 고생을 많이 했던 기억이 난다.

전공책이나 어느 프로그래밍 책에도 NFC를 활용하는 예제가 없었기에,

오로지 구글링 만으로 해결했던 것 같다.

모르는 코드를 가져와서 뜯어보고 내거에 붙이려니까 정말 어렵더라.

// 감지된 태그에 NdefMessage를 쓰기

    @SuppressLint("WrongConstant")
    public boolean writeTag(NdefMessage message, Tag tag) {
        int size = message.toByteArray().length;
        try {
            Toast.makeText(getApplicationContext(), "한번 써보겠습니당", 1000).show();
            Ndef ndef = Ndef.get(tag);
            if (ndef != null) {
                ndef.connect();
                if (!ndef.isWritable()) {
                    Toast.makeText(getApplicationContext(), "!ndef.isWritable()", 1000).show();
                    return false;
                }

                if (ndef.getMaxSize() < size) {
                    Toast.makeText(getApplicationContext(), "ndef.getMaxSize() < size, \n msgsize =" + size + "\n NFCsize = "+ndef.getMaxSize(), 1000).show();
                    return false;
                }

                ndef.writeNdefMessage(message);
                Toast.makeText(getApplicationContext(), "쓰기성공! \n msgsize =" + size + "\n NFCsize = "+ndef.getMaxSize(), 1000).show();
            }

            else {
                Toast.makeText(this, "포맷되지 않은 태그이므로 먼저 포맷하고 데이터를 씁니다.",
                        Toast.LENGTH_SHORT).show();

                NdefFormatable formatable = NdefFormatable.get(tag);
                if (formatable != null) {
                    try {
                        formatable.connect();
                        formatable.format(message);
                    } catch (IOException ex) {
                        ex.printStackTrace();
                    }
                }

                return false;
            }
        } catch (Exception ex) {
            ex.printStackTrace();

            return false;
        }

        return true;
    }

하지만 어떻게든 된다..

위 사진은 빈 NFC에 NDEF 기능을 이용하여 write를 하고
(CD에 데이터 쓰는것 같이.. 문제는 데이터 쓰는 것도 코드처럼 내가만들어야 함ㅋㅋ)
쓰여진 NFC를 핸드폰에 태그하여 정상적으로 태깅이 되는지 확인하는 장면

아쉬운게 있다면, NFC의 데이터 전송량이 매우 작아 이미지를 넣기가 어려웠다.
그래서 위 사진처럼 이미지가 다 깨진 10x10bit.. 밖에 안들어감
그때는 다른 구현할 것도 많아서 못했지만 지금와서 생각해보면 이미지 데이터를 DB에 보관하고 서버에서 불러오는 방식이나, 앱 내에 내장하여 불러오는 방식도 있었을 텐데, 완성도가 부족해서 아쉽다.

QR 코드 생성기

쇼핑 다하고 결제 버튼 누르면 QR 코드가 생성된다.
이걸로 카운터에서 찍고 카드결제를 하는 것으로 제작했다..
(모바일에서 바로결제 등 다른 편리한 방법도 생각했지만, 도난 방지등을 위해 카운터는 어찌되었든 거쳐서 가야 될 것이라 생각했었다.)

기술요약

사용 된 기술정리

서버나 DB 쪽은 같은 팀원이 맡아서 했었고, 나는 NFC와 QR 등을 포함한 사용자 기능 위주로 개발했다.

3년이 지난 지금와서 돌아보면 프론트엔드 / 백엔드 구분 없이 기능별로 맡아서 진행한 부분과,
나름 작성한 계획서와 보고서가 엉성한게 눈에 띈다.
겨우 이거 했나 싶다가도 가까이 코드를 들여다보면 그 때는 어떻게든 구현하려고 애썼던 흔적이 고스란히 남아있다. 더 체계적이고 더 전문적으로 도전하면 좋았을 걸, 겁이 너무 많았던 것 같다.

UI SEOK YU