NextJS14 로 RgbitSoft 홈페이지 개발, 그리고 시작

안녕하세요. 간만에 웹개발로 사이트를 하나 만들어 봤습니다. 현재 초기버전입니다.

RgbitSoft 웹사이트 기획

바로 제가 오래전부터 마음속에 담아두고 있던 작명 RgbitSoft 인데요.

빛의 삼원소인 Red, Green, Blue가 만나 더 나은 가치를 창조하는 밝은 세상을 만들어 나가겠다는 이념을 가지고 있습니다. 이 RgbitCode 웹 사이트에서 내세우고 있는 철학과 일맥상통 합니다.

차이점은 RgbitCode는 코딩관련한 것들을 정리하고 있던 개발자 블로그였는데요.

RgbitSoft는 좀 더 확장된 개념으로 고객들과 만나는 이름이라고 볼 수 있습니다.

코딩(Coding)만 하는 수준에서 벗어나 (Software) 개발로 사용자를 만나겠다는 의미도 가지고 있고요.

아직 극초기 단계에 불과하지만, 응용 소프트웨어 개발 및 공급업을 하는 전문 개발 회사로 키워나가고자 하는 꿈을 품고 있습니다.

RgbitSoft 는 여러가지로 복합적인 의미를 담고 있습니다.

Red, Green, Blue + IT + Soft 가 되기도 하고

RGB + bit + Soft 가 되기도 합니다.

RgbitSoft는 여러 함축적인 의미들을 웹 기술을 이용해 시각적으로 표현해보고자 했습니다.

개발스텍

rgbitcode 웹 사이트를 개발할 때와 마찬가지로 NextJS14 버전을 사용했습니다.

• NextJS 14

• TypeScript

• Tailwindcss

사이트 디자인 컨셉

Home

먼저, 아직 내세울 만한 것들이 별로 없는 상황이기 때문에 싱글 페이지 형태로 만들었네요

페이지 첫 화면입니다. 상단에 Red, Green, Blue가 만나 세상을 밝게 비추어 나간다는 느낌을 주도록

가운데를 환하게 빛이 나는 느낌을 표현했습니다.

About

About 페이지입니다.

배경에 디지털 세계의 0과 1의 비트(bit)를 다루는 RGB + Bit 를 시각적으로 표현하고

Red, Green, Blue가 상징하는 정신적인 요소들을 배치했습니다.

• Red - Innovation ( 혁신, 열정 )

• Green - Technology ( 기술 )

• Blue - Creativity ( 창의성 )

Services

Services 페이지입니다.

마찬가지로 Red, Green, Blue의 실질적인 구현체로 무엇을 제공하려는가에 대해서 표현 했습니다.

• Red - Web Development

• Green - Mobile App Development

• Blue - Custom Software Solutions

  
  

앞으로 다양한 소프트웨어들을 개발하고 자체 서비스를 해볼 계획을 가지고 있습니다.

( 어디에 자랑할 만한 자체 개발 제품들이 만들어 지면 Products 페이지가 추가 될 것 같습니다. )

배포

배포는 Vercel 과 cloudflare를 이용했습니다.

그런데, 로컬에서 빌드를 할 때는 문제 없었는데, vercel에 배포할 때는 오류를 마주합니다.

문제코드

export default function HeroSection() {
    const [animationStyles, setAnimationStyles] = useState([]);

    useEffect(() => {
        // 클라이언트 측에서만 랜덤 값을 설정
        const generatedStyles = Array.from({ length: 72 }, () => ({
            animationDelay: `${Math.random() * 2}s`,
            animationDuration: `${2 + Math.random() * 3}s`,
            width: `${Math.random() * 5 + 3}px`,
            height: `${Math.random() * 5 + 3}px`,
        }));
        setAnimationStyles(generatedStyles);
    }, []);

해결

type AnimationStyle = {
    animationDelay: string;
    animationDuration: string;
    width: string;
    height: string;
};

export default function HeroSection() {
    const [animationStyles, setAnimationStyles] = useState<AnimationStyle[]>([]);

    useEffect(() => {
        // 클라이언트 측에서만 랜덤 값을 설정
        const generatedStyles = Array.from({ length: 72 }, () => ({
            animationDelay: `${Math.random() * 2}s`,
            animationDuration: `${2 + Math.random() * 3}s`,
            width: `${Math.random() * 5 + 3}px`,
            height: `${Math.random() * 5 + 3}px`,
        }));
        setAnimationStyles(generatedStyles);
    }, []);

이런 자잘한 것들이 vercel에 배포할 때는 오류가 날 수 있으니, 개발할 때 꼼꼼하게 체크를 할 필요가 있겠습니다.

그리고, 오래전 부터 가지고 있던 rgbitsoft 도메인을 cloudflare 와 vercel 과 연결했습니다.

메일서버도 도메인에 연결.

사이트

아래 사이트에서 이 결과물을 확인해 보실 수 있습니다.

https://www.rgbitsoft.com/

아직 극초기 단계라 다소 부족하지만, 앞으로 많은 것들을 실현해 나가고자 합니다.