현 프로젝트 준비단계

21. 화면 UI제작 / 광고바 제작

깡 딱 2025. 2. 24. 01:08
728x90
소요시간

2025년 2월 23일 - 5시간

 

 

느낀 점

 

최근 이틀간 졸업식 때문에 작업을 못해서 오래 못한 점에 대해서 살짝 헤이 해진 느낌이 들었다.

그래서 전반적으로 UI작업을 싹 다 끝내버렸다. 또한 일부 기능은 이제 다 만들었는데

친구들에게 테스트를 해봤는데 아직 기능이 완벽하지 않아서 어떤 어플인지도 모르는 거 같다.

좀 더 노력해야겠다. 아직 100퍼센트 중 프로토타입도 50 퍼 밖에 성공하지 못했다.

백엔드도 나눠야 되고 할 일이 많은데 이번 연도 안에는 꼭 다 만들고 싶다.

 

 

 

 

 

 

SingleChildScrollView VS CarouselSlider

 

 

나는 사실 SingleChildScrollView만 썼는데 

이건 단점이 옆으로 넘기는건 잘되는데 

원래 넘겼을때 한 박스당 멈춰 줘야 되는데

그냥 쭉 넘어간다. 문제가 있다고 판단해서 

괜찮은 라이브러리를 찾던 중 

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      Container(
        width: 128.w,
        height: 252.h,
        color: Colors.pink,
      ),
      SizedBox(width: 8.w),
      Container(
        width: 128.w,
        height: 252.h,
        color: Colors.pink,
      ),
      SizedBox(width: 8.w),
      Container(
        width: 128.w,
        height: 252.h,
        color: Colors.pink,
      ),
      SizedBox(width: 8.w),
    ],
  ),
),

 

 

CarouselSlider 라이브러리를 발견했습니다.

진짜 좋다고 느낀 게 viewportFraction: 0.9와 자동재생 기능, 시간설정, 이동 애니메이션 등

여러 기능이 있어서 아주 간편하게 광고바를 만들 수 있었습니다.

근데 이 방법 말고도 pageview로도 한번 제작을 해봤는데 개인적으로 

진적 커스텀 하기보다는 CarouselSlider을

커스텀하면 메서드도 따로 만들어서 설정해줘야 되는데 훨씬 편하다. 

CarouselSlider(
  options: CarouselOptions(
    height: 158.h,
    viewportFraction: 0.9,
    enableInfiniteScroll: true,
    autoPlay: true, // 자동 재생 활성화
    autoPlayInterval: Duration(seconds:4), // 2초마다 이동
    autoPlayAnimationDuration: Duration(milliseconds: 800), // 이동 애니메이션 속도 (선택 사항)

  ),
  items: pages.map((page) {
    return Builder(
      builder: (BuildContext context) {
        return Padding(
          padding: EdgeInsets.symmetric(horizontal: 8.w),
          child: buildPage(page['image']!, page['text']!),
        );
      },
    );
  }).toList(),
),

 

 

처음에는 피그마에서 만든 광고바를 못 만들 줄 알았는데  그냥 완전하게 똑같이 만들 수 있었다.

왼쪽은 내가 개발한 거 오른쪽은 피그마에서 만든 것 

 

 

보이지 않는 싸움 (데이터베이스)

 

내가 만들고 싶은 게 사용자마다 몇 명이 봤는지 만드는 건데 

이게 생각보다 시간이 많이 걸렸다 기획하는데

그래서 ai를 이용해서 쿼리문을 같이 짜게 되었는데 

 

테이블을 두 개 만들었는데 

userinfo 테이블
id (UUID, 기본 키)
email (TEXT)
username (TEXT)
birthdate (DATE)
gender (BOOL)
category (TEXT)
created_at (TIMESTAMP)

modir 테이블
id (INT, 기본 키)
created_at (TIMESTAMPTZ)
title (TEXT)
mapy (FLOAT8)
mapx (FLOAT8)
roadAddress (TEXT)
addr_ (TEXT)
description (TEXT)
website (TEXT)
type (TEXT)

 

 

사용자는 버튼을 클릭했을 때 다음 정보를 새로운 테이블에 저장하려고 합니다:


  • 매장 ID (modir.id): 클릭한 매장의 ID (예: modir 테이블의 id).
  • 유저 UUID (userinfo.id): 현재 유저의 ID (예: userinfo 테이블의 id).
  • 카테고리 (userinfo.category): 유저의 카테고리 정보.
  • 성별 (userinfo.gender): 유저의 성별 정보.
  • 조회수 (Views): 매장 방문 또는 클릭 시 증가하는 카운트.

이 데이터를 저장하기 위해 새로운 테이블을 만들고, 버튼 클릭 시 데이터를 생성(Create)하려고 합니다.

 

이렇게 쿼리문을 짜게 되었습니다. 

CREATE TABLE user_store_interactions (
    id SERIAL PRIMARY KEY, -- 고유한 ID (자동 증가)
    user_id UUID REFERENCES userinfo(id), -- userinfo 테이블의 id (외래 키)
    store_id INT REFERENCES modir(id), -- modir 테이블의 id (외래 키)
    category TEXT, -- userinfo에서 가져온 카테고리
    gender BOOLEAN, -- userinfo에서 가져온 성별
    views INT DEFAULT 0, -- 조회수 (기본값 0)
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP -- 생성 시간
);

 

이런 식으로 외래키로 전달받아서 테이블이 하나 생성 되게 만들었습니다.

이제 버튼을 클릭했을 때 이정보들이 저장되게만 만들면 되는데

확실히 백엔드 서버가 따로 없다 보니까 

진짜 문제가 많이 생깁니다.

최소한 mvvm모델이라도 잘 지켰어야 됐는데...

최소 기능만 만들고 모델 수정하고 백엔드서버 빨리 만들고 싶네요..

728x90